build69
Sign inGet API key
build69  /  Components  /  Feedback & Status  /  Spinner

Spinner

v1.0.1Updated 20 Jul 2026

Inline loading spinner with seven visual variants (spin, dots, pulse, ring, bars, gradient, orbit), five sizes, and three tones. Use inside buttons or anywhere a small loading glyph is needed.

View source← Back to catalog

Preview

Live · 9 stories
All VariantsOpen ↗
▸Why this is recommendedloadingspinnerprogressinline+2

Every Spinner variant lined up for comparison.

Recommended for+14
  • ✓Inside Button while submitting
  • ✓Inline "loading more" indicator
  • ✓Tile-level micro spinners
Tags+6
loadingspinnerprogressinlineallvariants
Features+4
  • Variants: spin / dots / pulse / ring / bars / gradient / orbit
  • Sizes: xs / sm / md / lg / xl
  • Tones: default / primary / muted
  • role="status" + aria-label
  • Accessible label
Not recommended for−2
  • ✕Full-page blocking states (use SpinnerOverlay)
  • ✕Determinate progress (use Progress)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Spinner" })

Usage

import { Spinner } from '@/components/primitives/spinner';

<Button disabled>
  <Spinner size="sm" /> Saving…
</Button>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
variant

Visual style

'spin' | 'dots' | 'pulse' | 'ring' | 'bars' | 'gradient' | 'orbit'—
size

Size preset

'xs' | 'sm' | 'md' | 'lg' | 'xl'—
tone

Color tone

'default' | 'primary' | 'muted'—
label

Accessible label

string—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files