Actions

Variants

Apply .btn first, then exactly one variant modifier. Use the variant that matches the intent of the action — not its visual weight preference.

Size tokens

Disabled state

Hover, active, and focus states are driven by --btn-* token values. Focus uses the global :focus-visible outline from base.css. Disabled buttons reduce opacity via --btn-disabled-opacity and suppress pointer events.

For <a> elements acting as disabled buttons, use aria-disabled="true" and tabindex="-1" with inline opacity and pointer-events: none — the disabled attribute has no effect on anchors.

<button class="btn btn-p" disabled>Can't proceed</button>

<!-- anchor disabled state -->
<a class="btn btn-p" aria-disabled="true" tabindex="-1"
   style="opacity: var(--btn-disabled-opacity); pointer-events: none;">
  Can't proceed
</a>

Loading state

<button class="btn btn-p btn-loading" aria-label="Saving">
  <span class="spinner spinner-sm" aria-hidden="true"></span>
  Saving…
</button>

The spinner is aria-hidden because the button's own label already describes the state. Toggle .btn-loading via JavaScript when the async operation starts and ends. Do not use the HTML disabled attribute for loading — it removes the button from the tab order and prevents focus restoration after the operation completes.

Anatomy

<!-- base class + variant modifier -->
<button class="btn btn-p">Label</button>

<!-- with size modifier -->
<button class="btn btn-s btn-sm">Label</button>

<!-- with icon (flexbox gap: 6px) -->
<button class="btn btn-g">
  <i class="ti ti-download"></i>
  Download
</button>

<!-- link element acting as a button -->
<a href="/docs" class="btn btn-p">Read the docs</a>

Token reference

Overriding tokens

/* Retheme the primary button for a promotional section */
.promo-section {
  --btn-p-bg:       #7C3AED;
  --btn-p-hover-bg: #6D28D9;
  --btn-p-text:     #fff;
}

/* Pill-shaped buttons in a card */
.card {
  --btn-radius: var(--radius-full);
}

Naked links

Base link styles are applied globally via tokens/base.css. No class needed — just use <a href="…">.

<p>See the <a href="/docs">full documentation</a> for details.</p>

Link buttons

Any <a> element accepts the .btn classes. The base styles set text-decoration: none so links render identically to<button> elements. Use <button> for in-page actions and <a> for navigation.

<a href="/docs" class="btn btn-p">Read the docs</a>
<a href="/cancel" class="btn btn-s">Cancel</a>

Token reference

Overriding tokens

/* Retheme inline links in a dark editorial section */
.editorial {
  --link-color:       var(--fo0-glade);
  --link-hover-color: var(--fo1-fern);
}

Placement

Default placement is above the trigger. Add data-tooltip-placement="bottom" when the trigger sits near the top of the viewport and a top tooltip would overflow.

Anatomy

Works on any element that supports pseudo-elements. Does not work on replaced/void elements: <input>, <img>, <select>, <textarea>. Wrap them in a <span data-tooltip="…"> instead.

<!-- Icon button with tooltip (hover + keyboard focus) -->
<button data-tooltip="Delete item" aria-label="Delete item">
  <svg aria-hidden="true">…</svg>
</button>

<!-- Below placement -->
<button data-tooltip="More options"
        data-tooltip-placement="bottom"
        aria-label="More options">
  ⋯
</button>

<!-- Replaced element: wrap in a span -->
<span data-tooltip="Profile photo" style="display:inline-block">
  <img src="avatar.jpg" alt="Profile photo">
</span>

<!-- Abbreviation (hover only — not focusable) -->
<abbr data-tooltip="Cascading Style Sheets"
      title="Cascading Style Sheets">CSS</abbr>

Accessibility

content: attr(data-tooltip) in CSS pseudo-elements is not exposed to the accessibility tree. Always pair data-tooltip with aria-label(interactive elements) or title (non-interactive elements such as<abbr>) carrying the same text.

Tooltips respond to :focus-visible in CSS, so keyboard users see the bubble on focus without JavaScript. Non-focusable elements are hover-only — addtabindex="0" if keyboard access is needed for that element.

Touch devices: :hover is unreliable on mobile. If the tooltip text is essential (not supplementary), surface it in visible UI rather than relying on a tooltip.

Token reference

Overriding tokens

/* Custom tooltip colour in a dark promo section */
.promo {
  --tooltip-bg:   var(--fo2-forest);
  --tooltip-text: var(--bm2-birch);
}

Known limitation — viewport edges

The bubble is centred on the trigger midpoint via left: 50%; transform: translateX(-50%). On triggers near the left or right edge of the viewport the bubble may overflow. For fully collision-aware positioning use a JavaScript positioning library (e.g. Floating UI).