components
Spinner
An indeterminate loading indicator. A ring with an open top edge spins to signal ongoing work. Tone sets the color through the Savi tone model; neutral is the monochrome default.
Sizes
Three track diameters: sm 16px, md 24px, lg 32px.
sm
md
lg
Tones
The eight semantic intents. Color comes from each tone's base ramp.
neutral
primary
secondary
accent
success
warning
danger
info
Inline with text
Flows inside running text, so it reads cleanly next to a label.
Loading today's readinginline
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Track diameter. sm 16px, md 24px, lg 32px. |
| tone | Tone | "neutral" | Semantic intent that sets the ring color via the tone model. |
| label | string | "Loading" | Accessible label rendered as aria-label on the role=status element. |