Spinner

Shows that something loads.

import { Spinner } from 'components/UI/Spinner'

Sizes and color

Use md (the default) in most places and sm in dense UI, such as next to small text. The spinner takes the current text color.

sm · dense UI

md · default

lg · 20px

Text color

Loading replays

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Set label to say what is loading.
For a button action, use the button's loading prop. For content that loads, use Skeleton.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	The spinner diameter.
label	string	'Loading'	The accessible status label.
className	string	–	Classes for the spinner.