Spinner
Says that something is in progress, for work of unknown length.
The frame above shows the real web components, in the mode this site is in.
The design preview shows it next to every other web component.
When to use it
Section titled “When to use it”- It takes the color of the text around it.
- With
labelit is announced to assistive technology. Without one it is decoration next to text that already says what is happening. - For work of known length, use a ProgressBar.
Example
Section titled “Example”import { Spinner } from "@acme/ui";
<Spinner label="Loading" />Options
Section titled “Options”The web component’s props. The other platforms take the same options under their own naming conventions.
| Prop | Type | Notes |
|---|---|---|
size |
"sm" | "md" | "lg" |
Defaults to md. |
label |
string |
What a screen reader says. |
Source
Section titled “Source”| Platform | File |
|---|---|
| Web (React) | packages/ui/src/Spinner.tsx |
| React Native | packages/ui-native/src/Spinner.tsx |
| Compose Multiplatform | kotlin/ui/src/commonMain/kotlin/acme/ui/Spinner.kt |