Spinner

• Component overview: Radial line spinning loader for general loading wait states.
• Component group: Progress Indicators
• Figma page: ↳ Progress Indicators > Spinner

Basic Usage

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <Spinner size="sm" />
    <Spinner size="md" />
    <Spinner size="lg" />
  </div>,
)

Custom Color

Result

Loading...

Live Editor

render(
  <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
    <Spinner className="text-[var(--Labels-Primary)]" />
    <Spinner className="text-[var(--Grays-Gray-4)]" />
    <Spinner className="text-[var(--Labels-Error)]" />
  </div>,
)

Namespace Usage

Result

Loading...

Live Editor

render(<ProgressIndicators.Spinner size="sm" />)

Spinner Props

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Preset size 16/24/36px
className	string	—	Custom style class