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.

Variant	Class	Use
Primary	.btn-p	The single most important action on a page or in a dialog. Use once per view.
Secondary	.btn-s	Supporting actions alongside a primary button — cancel, back, view details.
Ghost	.btn-g	Low-emphasis actions in toolbars, cards, or dense layouts where ink weight matters.
Destructive	.btn-d	Irreversible operations: delete, remove, revoke. Pair with a confirmation dialog.

Sizes

Size modifiers adjust height and padding only. Font weight and variant colours are unaffected. Default fits most layouts; use .btn-sm for dense UIs and .btn-lg for hero CTAs.

Size	Class	Height	Padding	Font size
Small	.btn-sm	32px	0 12px	12px
Default	—	40px	0 16px	13px
Large	.btn-lg	48px	0 20px	14px

States

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>

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

Token	Default	Purpose
--btn-radius	var(--radius-md)	Border radius for all button variants
--btn-disabled-opacity	0.5	Opacity applied to disabled buttons
Primary
--btn-p-bg	var(--color-accent)	Primary background
--btn-p-text	var(--color-accent-text)	Primary text colour
--btn-p-hover-bg	var(--color-accent-hover)	Primary hover background
--btn-p-active-bg	var(--color-accent-active)	Primary pressed background
Secondary
--btn-s-bg	var(--color-bg-inset)	Secondary background
--btn-s-text	var(--color-text)	Secondary text colour
--btn-s-hover-bg	var(--color-bg-panel) / dark: var(--in3-ash)	Secondary hover background
Ghost
--btn-g-bg	transparent	Ghost background
--btn-g-border	var(--color-border)	Ghost border colour
--btn-g-hover-bg	var(--color-bg-panel)	Ghost hover background
Destructive
--btn-d-bg	var(--color-error)	Destructive background
--btn-d-text	var(--color-on-error)	Destructive text colour
--btn-d-hover-bg	var(--in0-void)	Destructive hover background (theme-invariant)

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

Token	Default	Purpose
--link-color	var(--color-accent)	Naked link colour
--link-hover-color	var(--color-accent-hover)	Naked link hover colour
--link-visited-color	var(--color-accent)	Naked link visited colour

Overriding tokens

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