16Shipped
Spinner
Loading indicator for async actions, panels, and button pending states.
Import
import { Spinner } from "@charply/design"Variants
Sizes
In button
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Spinner dimensions |
| label | string | "Loading" | Accessible status label |
Guidelines
docs/design/components/spinner.mdDo
- ✓Set a descriptive `label` when the spinner is the only loading indicator on screen
- ✓Use `size="sm"` inside buttons; keep button text ("Generating…")
Don't
- ✗Use spinners for decorative effect
- ✗Replace every `Loader2` in the codebase in one pass — migrate as you touch surfaces
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.