Button
A versatile button component for triggering actions and events.
Emphasis ladder
Variants aren’t a flat palette — they’re a ladder of emphasis. Give a view one high-emphasis action and step everything else down, so the primary stays the obvious payoff. Pick the variant by how much attention the action deserves, not by how it looks.
Primary — one per view
The single most important action on the screen.
default is the neutral primary CTA. Reach for accent when a screen has one clearly affirmative, brand-forward action worth elevating (e.g. Buy label, Create order) — it fills with the accent role color instead of --primary. Keep it to one accent per view.
Secondary — supporting actions
Sits beside the primary: Cancel, a secondary choice, a toolbar action that still needs presence.
secondary is a white chip that lifts off the canvas; outline is the quieter hairline. Both read as “not the main thing, but still a real button.”
Tertiary — low emphasis
Frequent, repeated, or inline actions that shouldn’t compete for attention — table-row controls, chips, inline links.
The soft family is a resting neutral wash (the ghost hover, made resting) that stays visible at rest — tertiary fills and the base for MiniButton. soft-accent and soft-destructive keep that neutral rest but tint blue / red on hover-focus, so an add or remove affordance only declares intent on interaction. ghost carries no chrome until hover — dense toolbars and table rows. link reads as inline text.
Destructive — the same ladder, in red
Mirror the emphasis levels above for irreversible actions; match the destructive variant to where the action sits.
destructive (solid) is the primary irreversible confirm (void label, delete forever). destructive-secondary (tonal) when a remove sits alongside other actions and shouldn’t read as the primary CTA. destructive-ghost / destructive-outline are the lowest-emphasis case — neutral at rest, revealing intent only on hover/focus (a trash icon in a table row). Both shift on hover and keyboard focus, so the signal isn’t mouse-only.
Sizes
With Icons
Icon Only
Rounded
Add rounded to fully round any button — a pill for text, a circle for icon-only. For the small text-scaled remove / add / dismiss chips, reach for MiniButton (a thin rounded preset with a text-relative size scale) instead of hand-sizing an icon button.
MiniButton
MiniButton is a small, text-scaled icon button — the ×, +, −, or trash that rides next to text (a chip, list row, dialog, or toast). It’s a thin <Button rounded> preset on a text-relative size scale (16–28px), distinct from Button’s button-row sizes. Pass the glyph as children; pick emphasis with variant (defaults to soft). Icon-only, so always pass an aria-label.
Sizes match the type scale’s line box — the box is as tall as a line of that text, so it sits flush inline: sm 16px (text-xs), md 20px (text-sm, default UI text), lg 24px (text-base), xl 28px (text-lg). That’s a different scale than Button’s control-row icon sizes (24–40px), which overlap it only at 24.
In a row — the label owns the space, the button rides the trailing edge and reddens on hover: