Components
Spinner
An animated loading indicator to communicate that content is being fetched or processed.
Sizes
sm
md
lg
xl
Colors
Primary
Success
Warning
Danger
Secondary
With Label
Loading data...
Saving changes...
Installation
npm install @trinkui/reactImport
import { Spinner } from "@trinkui/react";Usage
<Spinner size="md" color="primary" />
<Spinner size="lg" color="success" />
<Spinner size="sm" color="danger" label="Loading..." />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "xl" | "md" | Size of the spinner |
| color | "primary" | "secondary" | "success" | "warning" | "danger" | "primary" | Color of the spinner |
| label | string | — | Text shown next to the spinner |
| className | string | — | Additional CSS classes |
Accessibility
- •Uses
role="status"for screen reader announcement - •
aria-labeldescribes the loading state - •Animation respects
prefers-reduced-motion