Marble UI
← Components

Spinner

Preview: Sizes

Indeterminate progress, announced to assistive tech via React Aria ProgressBar.

Import

import { Spinner } from '@marbleui/ui'

Props

<Spinner>

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'

Also accepts React Aria props (84).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria ProgressBar. Follow the primitive's docs for the full keyboard map.

Usage notes

Small indeterminate loader for buttons, inline status and short waits. For a known percentage use ProgressBar or ProgressCircle; for content-shaped placeholders use Skeleton.

<div className="flex items-center gap-2 text-accent-ink">
  <Spinner size="sm" aria-label="Syncing" />
  <span>Syncing…</span>
</div>
  • Built on React Aria ProgressBar, so it is announced as a progress indicator. aria-label defaults to “Loading”; override it when you can be more specific.
  • size is sm, md (default) or lg.
  • Colour follows currentColor, so set a text colour on the spinner or a parent.
Example source · show
import { Spinner } from './spinner'

export const styles = {
  Sizes: () => (
    <div className="flex items-center gap-4 text-fg">
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  ),
  Accent: () => (
    <div className="flex items-center gap-2 text-sm text-accent-ink">
      <Spinner /> <span className="text-fg-muted">Syncing…</span>
    </div>
  ),
}

Source: packages/ui/src/spinner/spinner.tsx

Catalog

Category
feedback
Priority
Foundation
Primitive
custom
React Aria
ProgressBar (indeterminate)
Base UI
Progress