Skip to content

Buttons

Button types, size modifiers, and leading icons.

Buttons

Types

The following button styles are available:

<button class="primary">Primary</button>
<button>Neutral</button>
<button class="accent">Accent</button>
<button class="danger" data-icon="warning">Danger</button>
Type Class Meaning Examples
Primary .primary Positive Save, Start, Continue, Connect
Neutral - Neutral Back, Cancel, Close
Accent .accent Alternate Test connection, Choose
Danger .danger Destructive Delete, Uninstall

Usage tips

  • Use .primary to draw attention, limit to one per screen
  • Use .accent when multiple action buttons are needed on one screen
  • Always pair .danger with an icon

Unstyled buttons

To opt out of button styling, use the unstyled class.

Use class="button" on anchor tags that should look like buttons.

Continue Back 
<a href="/action" class="button primary">Continue</a>
<a href="/cancel" class="button">Back</a>

Sizes

Default buttons are full-size. Add .small for compact buttons in tight spaces.

<button class="small primary">Confirm</button> 
<button class="small">Cancel</button>

Icons

All button types support leading icons via Material Symbols.

<button class="primary" data-icon="rocket_launch">Launch</button>
<button data-icon="settings">Settings</button>
<button class="danger" data-icon="delete">Delete</button>

Icon-only

Omit the text for a compact icon button. Must have aria-label.

<button data-icon="settings" aria-label="Settings"></button>
<button class="primary" data-icon="send" aria-label="Send"></button>