Button

Buttons are used to trigger actions and events.

Usage

Use the .Button class on <button> or <a> elements.

<button class="Button primary">Save</button>
<button class="Button accent">Highlight</button>

Variants

Add a color variant alongside .Button. Without a variant the button defaults to a neutral fill.

• primary: Main action.
• accent: Alternative main action.
• success: Positive outcomes.
• warning: Cautionary actions.
• danger: Destructive or negative outcomes.
• info: Informational actions.

Example

Styles

Combine a style modifier with a color variant for alternate visual treatments.

• secondary: Transparent background with a colored border and text.
• ghost: No border or background, colored text only.

<button class="Button primary secondary">Outline</button>
<button class="Button primary ghost">Ghost</button>

Sizes

• .compact: Smaller padding and font size.
• Default: Standard size.
• .large: Larger padding and font size.

<button class="Button primary compact">Compact</button>
<button class="Button primary">Default</button>
<button class="Button primary large">Large</button>

Disabled

Use the native disabled attribute or data-disabled for non-native elements.

<button class="Button primary" disabled>Disabled</button>
<a class="Button primary" data-disabled aria-disabled="true">Disabled link</a>

Toggle Buttons

For toggle buttons, apply data-active and aria-pressed together to communicate pressed state.

<button class="Button info" data-active aria-pressed="true">Filter On</button>

Icon Buttons

Use .IconButton for icon-only actions. Wrap the accessible label in .IconButton-Text (visually hidden).

<button class="IconButton edit" aria-label="Edit">
  <span class="IconButton-Text">Edit</span>
</button>
<button class="IconButton delete" aria-label="Delete">
  <span class="IconButton-Text">Delete</span>
</button>
<button class="IconButton hide" aria-label="Hide">
  <span class="IconButton-Text">Hide</span>
</button>
<button class="IconButton toggle" aria-label="Expand">
  <span class="IconButton-Text">Expand</span>
</button>

Use data-toggled on a .toggle icon button to rotate the chevron 90°.

<button class="IconButton toggle plain" data-toggled>…</button>

Button with Icon

Use .Button-Icon for an inline SVG and .Button-Text for the label inside a standard button.

<button class="Button primary">
  <svg class="Button-Icon" aria-hidden="true">…</svg>
  <span class="Button-Text">Save</span>
</button>