toolbox

Button

.btn for a labeled button, .icon-btn for a square icon-only one. Raise --bg for a chromatic primary action.

<button class="btn">Default</button>
<button class="btn" style="--bg: var(--cfg-bg-loud); --fg: -1;
        border-color: transparent">Primary</button>
<button class="icon-btn"><svg>…</svg></button>

Tag

A labeled chip. As a <span> it is static; as a <button> with aria-pressed it is a toggle. The semantic helpers — suc inf wrn dgr bw — set its color.

<span class="tag">NEW</span>
<span class="tag suc">live</span>

<button class="tag" aria-pressed="false">toggle</button>
<button class="tag" aria-pressed="true">toggle</button>

Tabs

A row of role="tab" buttons. aria-selected marks the active one. Add .underline for the understated variant.

<div class="tabs" role="tablist">
  <button role="tab" aria-selected="true">Overview</button>
  <button role="tab" aria-selected="false">Activity</button>
</div>

<div class="tabs underline" role="tablist">…</div>

A small generic handler swaps aria-selected on click — one listener covers every .tabs group on the page.

Card

.card draws a quiet border, .Card a louder one. Add .stage for a card that paints its own background.

<div class="card">…</div>
<div class="Card">…</div>
<div class="card stage">…</div>

Input

.input styles text fields, selects, and textareas alike. Inside a <form> they stretch to full width; inside a <fieldset> they arrange as flex children.

<form>
  <div><label>Email</label><input class="input" type="email"></div>
  <fieldset>
    <div><label>First</label><input class="input"></div>
    <div><label>Last</label><input class="input"></div>
  </fieldset>
</form>

Check & radio

.check on a checkbox, .radio on a radio input.

<input class="check" type="checkbox">
<input class="radio" type="radio" name="plan">

Avatar

An initials chip. Size it with --type, vary its color with --hue-shift.

<span class="avatar">MD</span>
<span class="avatar" style="--hue-shift: 90">JM</span>
<span class="avatar" style="--type: 1">AB</span>

Crumbs

A breadcrumb trail. Separators render automatically between children. This page's subheader is a .crumbs.

<nav class="crumbs">
  <a href="#">Home</a>
  <a href="#">Library</a>
  <span aria-current="page">Current</span>
</nav>

Link

.link styles an anchor as an inline text link.

Read the full changelog or jump to the latest release.

<a class="link" href="#">full changelog</a>

Progress

A native <progress>. Give it a value for a determinate bar; omit it for an indeterminate pulse.

<progress value="65" max="100"></progress>
<progress></progress>

kbd

A keyboard key. Use the native <kbd> element.

Press ⌘ K to open search, or Esc to close it.

Press <kbd>⌘</kbd> <kbd>K</kbd> to open search.

Rule

A native <hr> draws a horizontal divider. Add .vr for a vertical one — useful between inline items.

<hr>

<div class="row">
  <span>Profile</span>
  <hr class="vr">
  <span>Billing</span>
</div>

Navbar

A vertical navigation column. Each link is an <a> holding an icon and a <p> label. aria-current="page" marks the active entry. The rail on the left of this page is a .navbar-dynamic — same component, collapsing to icon-only cells on narrow screens.

<nav class="navbar">
  <a href="#" aria-current="page">
    <svg>…</svg>
    <p>Dashboard</p>
  </a>
  <a href="#">
    <svg>…</svg>
    <p>Team</p>
    <span class="tag">3</span>
  </a>
</nav>

An optional .tag after the label pins to the right. Use .navbar-dynamic instead of .navbar for the variant that collapses to icon cells below 1024px.

Text utilities

.nowrap keeps text on one line. .truncate ellipsizes overflow — it needs a constrained width to work against.

<span class="truncate">long text ellipsized…</span>
<span class="nowrap">never wraps</span>