Basic Components
Spinner
Spinner indicates that something is in progress. The ring is sized in em, so it scales with the size prop and lines up with text.
Basic usage
Spinner indicates that something is in progress. Give it an aria-label so the busy state has a name, since the ring itself carries no text.
<Spinner aria-label="Loading"/>It renders role="status", so assistive technology announces the label when the spinner appears.
Sizes
The ring is one em square, so it scales with the size prop and lines up with text of the same size.
<Row itemsCenter flexWrap> <Spinner xs aria-label="Loading"/> <Spinner sm aria-label="Loading"/> <Spinner aria-label="Loading"/> <Spinner lg aria-label="Loading"/> <Spinner xl aria-label="Loading"/></Row>Appearances
<Row itemsCenter flexWrap> <Spinner primary aria-label="Loading"/> <Spinner secondary aria-label="Loading"/> <Spinner success aria-label="Loading"/> <Spinner danger aria-label="Loading"/></Row>Inline with text
Because the ring is sized in em, it matches the surrounding text without any manual tuning.
Checking availability…
<Row itemsCenter> <Spinner sm aria-label="Loading"/> <Text sm secondary>Checking availability…</Text></Row>Inside a Button
Button has its own loading prop, which swaps the label for a spinner and keeps the button's width, so the layout does not jump.
<Row flexWrap> <Button loading>Saving</Button> <Button filled loading>Saving</Button></Row>Spinner honours prefers-reduced-motion: the animation stops for users who ask for less motion.
Spinner Props
| Prop | Category | Default | Description |
|---|---|---|---|
accent | Appearance | Accent color appearance (rose) | |
danger | Appearance | Danger color appearance (red) | |
info | Appearance | Info color appearance (cyan) | |
inheritAppearance | Appearance | Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables | |
primary | Appearance | Primary color appearance (gray) | |
secondary | Appearance | Secondary color appearance (gray) | |
success | Appearance | Success color appearance (green) | |
tertiary | Appearance | Tertiary color appearance | |
warning | Appearance | Warning color appearance (amber) | |
margin | Margin | Enable margin on all sides | |
marginB | Margin | Enable only bottom margin | |
marginT | Margin | Enable only top margin | |
marginX | Margin | Enable only horizontal (inline) margin | |
marginY | Margin | Enable only vertical (block) margin | |
noMargin | Margin | ✓ | Disable margin (reset to 0) |
lg | Size | Large size | |
md | Size | ✓ | Medium size (default) |
sm | Size | Small size | |
xl | Size | Extra large size | |
xs | Size | Extra small size |
Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props
| Prop | Category | Default | Description |
|---|---|---|---|
block | Display | Block display - takes full width, new line | |
contents | Display | Contents display - element's box is removed, children display as if parent didn't exist | |
flex | Display | Flex display - flexbox container | |
grid | Display | Grid display - CSS grid container | |
hidden | Display | Hidden display - element is not visible | |
inline | Display | Inline display - flows with text | |
inlineBlock | Display | ✓ | Inline-block display - inline but with block properties |
inlineFlex | Display | Inline-flex display - inline flexbox container | |
inlineGrid | Display | Inline-grid display - inline grid container | |
table | Display | Table display - behaves like table element | |
tableCell | Display | Table-cell display - behaves like td element | |
desktopHide | Hide | Hide element on desktop devices and below (max-desktop: 80rem) | |
mobileHide | Hide | Hide element on mobile devices and below (max-mobile: 48rem) | |
tabletHide | Hide | Hide element on tablet devices and below (max-tablet: 64rem) |