Connor Adams · Design System

core

Spinner

Sizes

Import

import { Spinner } from '@connor-adams/designsystem'

Usage

An indeterminate loading ring for buttons, inline fetches, and empty panels. Inside a Button it inherits the label color via tone="current".

<Button disabled><Spinner size="sm" /> Importing…</Button>
<Spinner tone="primary" size="lg" />

Variants: size="sm|default|lg" or a px number, tone="current|primary|muted".

Props

PropTypeDefaultDescription
sizenumber | "sm" | "lg" | "default" | undefineddefault
tone(string & {}) | "primary" | "muted" | "current" | "gradient-current" | "gradient-primary" | "gradient-muted" | "hero" | undefinedcurrent
labelstring | undefinedLoading