Buttons¶

Types¶

The following button styles are available:

<button class="gradient">Gradient</button>
<button>Neutral</button>
<button class="accent">Accent</button>
<button class="danger" data-icon="warning">Danger</button>

Type	Class	Meaning	Examples
Gradient	`.gradient`	Positive	Save, Start, Continue, Connect
Neutral	-	Neutral	Back, Cancel, Close
Accent	`.accent`	Alternate	Test connection, Choose
Danger	`.danger`	Destructive	Delete, Uninstall

Usage tips

Use .gradient 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.

Links¶

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

Continue Back

<a href="/action" class="button gradient">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 gradient">Confirm</button>
<button class="small">Cancel</button>

Icons¶

All button types support leading icons via Material Symbols.

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

Icon-only buttons

Buttons without visible text must have aria-label:

<button data-icon="close" aria-label="Close"></button>