ComponentsFoundations

Spinner

An indeterminate loading indicator: a thin track with a rotating, breathing arc. Decorative by default, announced politely when it has a label, and a slow pulse under reduced motion.

components/spinner.tsx, styles/base.csstheme · material · accent · density · font

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { Spinner } from "@vamos-ui/react";

<Spinner label="Loading orders" />

Examples

Inline status

Next to visible text the spinner stays decorative — the text already says what is happening.

Saving changes…

All changes saved

Delayed refresh (billing)

delay hides the spinner for the first few hundred ms with CSS only, so fast responses never flash.

Recent invoices

Refreshing invoices Syncing with accounting

INV-2041Kadıköy Bistro$1,280.00Paid
INV-2042Moda Wellness$640.00Due
INV-2043Rıhtım Caddesi 14$2,150.00Due

In buttons

Button loading uses Spinner, replaces a leading icon and sets aria-busy.

API

Spinner

Prop	Type	Default
`size` 12 / 16 / 20 / 28 px, or any pixel size.	`"xs" \| "sm" \| "md" \| "lg" \| number`	`"sm"`
`tone` currentColor, accent ink, or muted text colour.	`"current" \| "accent" \| "muted"`	`"current"`
`label` Accessible status text. Present → role="status" + aria-live="polite"; absent → aria-hidden.	`string`	`—`
`delay` ms before the spinner becomes visible.	`number`	`—`
`...props` Passed to the <svg>.	`SVGAttributes`	`—`

Sparkline

Stat