Spinner
An animated ring that signals an indeterminate loading state. Use inline for buttons and forms, or centred for full-area loading states.
Examples
Sizes
Inline with text
Loading data…
In a loading state
Loading…
In a button
Props
size= 'md'
'xs' | 'sm' | 'md' | 'lg'
Controls the diameter and border width.
label= 'Loading…'
string
Accessible label read by screen readers.
className
string
Additional classes.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Controls the diameter and border width. |
| label | string | 'Loading…' | Accessible label read by screen readers. |
| className | string | — | Additional classes. |