API and Development
Loader from @prepared911/ui/loader.
Renders a span with role="status". Takes the props below and data-* attributes; nothing else reaches the DOM.
| Prop | Type | Default | Notes |
|---|---|---|---|
label | LocalizedMessage | DisplayValue | Visible text beside the spinner | |
aria-label | LocalizedMessage | Required when there is no label; optional with one | |
pattern | LoaderPattern | Dot-matrix animation in place of the spinner glyph | |
size | 12 | 16 | 20 | 24 | 16 | Dot matrix only; 20 and up use a 4x4 grid, else 3x3 |
className | string | Appended after the generated classes | |
id | string | ||
ref | Ref<HTMLSpanElement> |
LoaderProps is a union: either label is set, or aria-label is required. Reserved design-system state names in data-* are dropped with a warning.
Loader, LOADER_PATTERNS and the types LoaderProps, LoaderPattern and LoaderDotSize.
pattern is one of pulse, orbit, spiral, wave, scan, rain, sparkle or bloom.
| Name | Type | Default | Description |
|---|---|---|---|
aria-label | LocalizedMessage | — | Optional accessible name for the status region when the visible text is not enough. Accessible name of the pending state. |
className | string | — | Classes appended after the generated classes. |
id | string | — | Id of the root element. |
label | LocalizedMessage | DisplayValue | — | Visible text beside the spinner, such as "Thinking…". No visible text. |
pattern | "pulse" | "orbit" | "spiral" | "wave" | "scan" | "rain" | "sparkle" | "bloom" | — | Plays a dot-matrix pattern in place of the spinner glyph. Omit for the spinner. |
ref | Ref<HTMLSpanElement> | — | Ref to the root element. |
size | LoaderDotSize | — | Size in px of the dot matrix; 24 and 20 use a 4x4 grid, 16 and 12 a 3x3 grid. Only applies with pattern. |