Skeleton

feedback

Visual loading placeholder for text, rectangular content, and circular media. Pair with SkeletonContainer to mark the surrounding content busy.

Preview

Scale1.00

Loading row

Content block

Usage

import { Skeleton, SkeletonContainer } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<SkeletonContainer busy>
  <Skeleton variant="circle" width="40px" />
  <Skeleton lines={3} />
</SkeletonContainer>

<Skeleton variant="rect" height="120px" animated={false} />

Props

Component	Prop	Type	Default	Description
`Skeleton`	`variant`	`'text' \| 'rect' \| 'circle'`	`'text'`	Placeholder shape.
`Skeleton`	`lines`	`number`	`1`	Number of text rows. Values below 1 render one row.
`Skeleton`	`animated`	`boolean`	`true`	Enables shimmer animation.
`Skeleton`	`width`	`string`	--	Sets `--skeleton-width`.
`Skeleton`	`height`	`string`	--	Sets `--skeleton-height`.
`Skeleton`	`class`	`string`	--	Additional CSS classes.
`SkeletonContainer`	`busy`	`boolean`	`false`	Sets `aria-busy` while content is loading.
`SkeletonContainer`	`children`	`JSX.Element`	--	Skeleton placeholders or pending content.
`SkeletonContainer`	`class`	`string`	--	Additional CSS classes.

Accessibility

Placeholder: Skeleton elements are aria-hidden="true" and do not announce as content.
Busy state: Put aria-busy on the surrounding content container with SkeletonContainer.
Motion: Shimmer animation is disabled for prefers-reduced-motion users.

Do / Don't

Do

Match skeleton shape and approximate size to the content that will replace it.

Don't

Don't use skeletons for errors or empty results. Use EmptyState when loading has finished and no content exists.