Spinner

atoms

Loading indicator — teal ring with rotating segment. Sizes: sm (16), md (24), lg (40). aria-label or aria-labelledby required when no visible label.

ARIA Role: status

Demo

Demo for Spinner (atoms)

Loading indicator — teal ring with rotating segment. Sizes: sm (16), md (24), lg (40). aria-label or aria-labelledby required when no visible label.

Props

PropTypeRequiredDefaultDescription
ariaLabelstringYes—Required — Spinner conveys no information visually without context

TypeScript Interface

interface SpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  label?: string;
  ariaLabel?: string;
}

Assertions (NASA Rule 5)

  • [type]ariaLabel required (NASA Rule 7)(NASA Rule 7)
  • [aria]role='status' aria-label='Loading' so SR users hear it(WCAG 4.1.3)

Usage

Import

import { Spinner } from '@epasslive/design-system'

Basic

<Spinner />

With Variants

<Spinner variant="primary" size="md" />