Spinner

Spinners indicate an active loading or processing state. Available in multiple sizes and colors for flexible integration.

Five sizes: xs, sm, md (default), lg, and xl.

Three color options: primary, white (on dark background), and current (inherits text color).

primary

white

current

Use Spinner as iconLeft in Button for interactive loading states. Click each button to trigger a 2-second simulation.

Toggle between a spinner-driven skeleton and loaded card content.

Fetching recipe…

Prop	Type	Default	Description
`size`	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Diameter of the spinner SVG.
`color`	"primary" \| "white" \| "current"	"primary"	Stroke color. Use "current" to inherit the surrounding text color.
`label`	string	"Loading…"	Accessible label read by screen readers (visually hidden).

Related Components

Full-area loading placeholder alternative

Embed spinners inside button loading states

Use when completion percentage is known