Buttons

Open “Buttons” in a new tab ↗

Variants

.btn plus one variant class:

Class	Use
.btn-primary	primary action (filled brand)
.btn-secondary	secondary filled
.btn-outline	bordered, transparent fill
.btn-ghost	transparent, no border until hover
.btn-danger	destructive action
.btn-link	looks like a link

Sizes, states, groups

• .btn-sm · .btn-icon (icon-only)
• States: .is-loading (with <span class="spin sm">), .is-success, .is-disabled
• Groups: .btn-group (joined) · .segmented (single-select) · .toggle-group (multi, JS toggles .on)

All padding/size flows through the density tokens, so buttons shrink in compact mode.