Default
default.tsx
<Spinner />Spinner
A spinner component used to indicate loading or progress states in an application.
Usage & Examples
Props API
15 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
aria-busy | boolean | No | aria | true | Whether the related region is busy. Defaults to true. |
aria-describedby | string | No | aria | — | ID of element(s) that describe the spinner. |
aria-label | string | No | aria | — | Accessible label announced by screen readers. Falls back to `label`, then "Loading". |
aria-labelledby | string | No | aria | — | ID of element(s) that label the spinner. Takes precedence over `aria-label` when provided. |
aria-live | "off" | "polite" | "assertive" | No | aria | "polite" | ARIA live region politeness. Defaults to "polite". |
className | string | No | styling | — | Additional class names for styling customization. |
data-testid | string | No | testing | — | Backward-compatible alias for test ID attributes. |
glass | boolean | No | props | configured default glass setting (fallback: false) | Applies a translucent frosted-glass surface behind the spinner. |
label | string | No | props | — | Optional visible label for the spinner. |
role | React.AriaRole | No | aria | "status" | Optional ARIA role. Defaults to "status". |
shadow | ShadowType | No | styling | configured default shadow (fallback: "light") | Shadow style for the spinner. One of: "none" | "light" | "medium" | "strong" | "intense" |
size | number | No | styling | 50 | The size of the spinner (in pixels). |