Skeleton

atoms

Loading skeleton — radius matched to whatever it's skeletonizing. Use while Server Components fetch data.

ARIA Role: status

Demo

Demo for Skeleton (atoms)

Loading skeleton — radius matched to whatever it's skeletonizing. Use while Server Components fetch data.

TypeScript Interface

interface SkeletonProps {
  width?: number | string;
  height?: number | string;
  radius?: 'sm' | 'md' | 'lg' | 'full';
  count?: number;
}

Assertions (NASA Rule 5)

  • [aria]Skeleton wrapper must have aria-busy='true' and aria-live='polite' for the loading region(WCAG 4.1.3)
  • [render]Multiple skeletons render as a <div role='list'> with role='listitem' children (NASA Rule 7: validate inputs)(NASA Rule 7)

Usage

Import

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

Basic

<Skeleton />

With Variants

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