Buttons
Variants
Section titled “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
Section titled “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.