components
Button
The primary action control. Built on the Savi tone and emphasis model: tone sets the intent, emphasis sets the visual weight against that tone's color ramp. Touch-first, md is 48px tall.
Emphasis
Four weights, mapped to the tone's ramp: solid (base), soft (muted), outline, and ghost. Shown at the primary tone.
solid
soft
outline
ghost
Tones, solid
The eight semantic intents at solid emphasis.
neutral
primary
secondary
accent
success
warning
danger
info
Tones, soft
The same intents at soft emphasis, for quieter actions.
neutral
primary
secondary
accent
success
warning
danger
info
Sizes
Touch-first. sm 40px, md 48px, lg 56px.
sm
md
lg
With icons
Leading and trailing icon slots.
leading
trailing
States
Disabled, loading, and full width.
disabled
loading
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | Tone | primary | Semantic intent: neutral, primary, secondary, accent, success, warning, danger, info. |
| emphasis | Emphasis | solid | Visual weight: solid, soft, outline, ghost. |
| size | ControlSize | md | sm (40px), md (48px), lg (56px). |
| fullWidth | boolean | false | Stretch to the container width. |
| loading | boolean | false | Show a spinner and disable interaction. |
| leadingIcon | ReactNode | none | Icon before the label. |
| trailingIcon | ReactNode | none | Icon after the label. |
| asChild | boolean | false | Render as the child element (e.g. a link) keeping styles. |