Spinner
Spinner shows that the system is working on a task of unknown duration.
Use it while content loads or an action waits for a response. There are 8 sizes from 16 to 44px. The label can sit before, after, above or below the spinner, and the inverted appearance works on dark or brand backgrounds.
Loading data…
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { Spinner } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Size
extra-tiny 16 → huge 44px.
Before
After
Above
Below
Label position
before, after (default), above, below.
Sending…
Inverted
For brand or dark backgrounds.
Usage
Do
- Place the Spinner close to the content that is loading.
- Add a short label that says what is happening when the wait is longer than a few seconds.
- Match the size to the container (small button → tiny, whole page → large).
Don't
- Don't show several Spinners on one screen at the same time.
- Don't use it when the progress is known. Use ProgressBar.
- Don't use the inverted appearance on light backgrounds.
Props
| Prop · Type | Default | Description |
|---|---|---|
| size"extra-tiny" | "tiny" | "extra-small" | "small" | "medium" | "large" | "extra-large" | "huge" | Default: "medium" | 16 / 20 / 24 / 28 / 32 / 36 / 40 / 44px. |
| appearance"primary" | "inverted" | Default: "primary" | Color of the arc and track. |
| labelReactNode | Default: — | Label (linked through aria-labelledby). Without a label, the aria-label is “Loading”. |
| labelPosition"before" | "after" | "above" | "below" | Default: "after" | Label position. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.spinner
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| labelstring aria-label khi không có | Default (English)"Loading" | messagesVi"Đang tải" |