Spinner
A compact loading status with localized text and an optional decorative presentation.@gemologic/sheen · loadingPlayground
Saving changes
<Spinner label="Saving changes" decorative={false} size="md"/>Variant matrix
Saving status
Saving changes
size: sm
Saving changes
size: md
Saving changes
size: lg
Saving changes
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Spinner.tsx- Tokens
--sheen-color-fg-muted--sheen-icon-size-sm--sheen-icon-size-md--sheen-icon-size-lg--sheen-duration-slow
Accessibility
Role: status unless decorativeKeyboard: No component-owned keysDo
- Use a compact status inside the affected region. The app owns loading timing.
- Use decorative mode beside an existing loading announcement to avoid duplicates.
Do not
- Do not use full-page spinners or replace existing content during refresh.
- Do not rely on an initially server-rendered live region being announced automatically.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | md | Semantic icon size. |
label | string | — | Localized status text, defaulting to the provider's loading message. |
decorative | boolean | false | Hide the spinner when surrounding content already announces loading. |