ds
Components
Chip, badge and pill

Chip, badge and pill

Tags, filter chips, counts and suggestion pills.

Chip

Spark ClickHouse Rust Kafka

Code

<div class="chips">
  <span class="chip">Spark</span>
  <span class="chip">ClickHouse</span>
  <span class="chip warm">Rust</span>
  <span class="chip">Kafka</span>
</div>

Square mono tags for technologies and topics. Rust is .warm on fin1te.com, the only tag that is.

Filter chips

Code

<div class="chips" role="group" aria-label="Filter by tag">
  <button class="chip" aria-pressed="true">Streaming</button>
  <button class="chip" aria-pressed="false">Storage</button>
  <button class="chip warm" aria-pressed="false">Rust</button>
</div>

Badge

v2 beta new 3 KB ok · db warn · api down · pgbouncer

Code

<span class="badge">v2</span>
<span class="badge outline">beta</span>
<span class="badge accent">new</span>
<span class="badge warm">3 KB</span>
<span class="badge ok">ok · db</span>
<span class="badge warn">warn · api</span>
<span class="badge down">down · pgbouncer</span>

Badges label a thing: a version, a count, a state. The status badges are what topo's step list uses to show what a step changes.

Pill

Code

<button class="pill">Add a Redis cache</button>
<button class="pill">Add observability</button>
<button class="pill">Split into tenant zones</button>

Rounded suggestions you can click, like the prompts under topo's Draw with AI box.

API

Class	On	What it does
`.chip`	span, a, button	Mono tag. Hover and pressed states apply to links and buttons.
`.warm`	.chip	Amber chip.
`.hl / .on / aria-pressed="true"`	.chip	Highlighted or selected.
`.chips`	div	Wrapping row of chips.
`.badge`	span	Small label. Modifiers: outline, accent, warm, ok, warn, down.
`.pill`	button	Rounded suggestion.