Buttons

Variants

Combine .btn with one style and semantic color. Icons need a visible label. --action-color* controls primary text and outlines; --primary* controls solid surfaces.

<button type="button" class="btn btn-solid btn-primary">Solid</button>
<button type="button" class="btn btn-outline btn-secondary">Outline</button>
<button type="button" class="btn btn-text btn-primary">Text</button>

Sizes and states

Use .btn-xs, .btn-sm or .btn-lg for sizing, plus native disabled or .is-active for states.

<button type="button" class="btn btn-solid btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-solid btn-primary is-active">Active</button>
<button type="button" class="btn btn-solid btn-primary" disabled>Disabled</button>

CSS Variables

--button-color: var(--text-color);
--button-color-hover: var(--text-color);
--button-color-active: var(--text-color);
--button-on-color: var(--on-primary);
--button-surface-color: var(--button-color);
--button-surface-color-hover: var(--button-color-hover);
--button-surface-color-active: var(--button-color-active);
--button-border-width: var(--border-width);
--button-border-radius: var(--border-radius);
--button-focus-outline-width: var(--focus-outline-width);
--button-focus-outline-style: var(--focus-outline-style);
--button-focus-outline-color: var(--focus-outline-color);
--button-focus-outline-offset: var(--focus-offset);
--button-font-size: var(--font-size);
--button-padding-y: var(--spacer-1);
--button-padding-x: var(--spacer-3);
--button-disabled-text-color: var(--disabled-text-color);
--button-disabled-bg-color: var(--disabled-bg-color);
--button-disabled-border-color: var(--disabled-border-color);
--button-transition-duration: var(--transition-duration, 0.2s);
--button-transition-easing: var(--transition-easing);
--button-highlight: var(--bg-highlight);