Skeleton
Animated loading placeholder that mirrors the shape of pending content
Category: display · WCAG 2.2-AA · loading, placeholder, shimmer, ai
Variants
- text
- circle
- rect
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'text' | 'circle' | 'rect' | text | Shape of the placeholder: `text` (stacked lines), `circle` (an avatar), `rect` (a block). |
width | string | — | CSS length applied as an inline custom property |
height | string | — | CSS length applied as an inline custom property |
lines | number | 1 | Number of bars for the text variant; the last bar renders shorter |
ai | boolean | false | Tints the placeholder and its sheen with the AI hue, marking content that an AI is generating (Carbon’s AI skeleton). |
Design tokens
--cascivo-color-border--cascivo-color-bg-subtle--cascivo-radius-sm--cascivo-radius-full--cascivo-radius-component--cascivo-color-ai-subtle--cascivo-color-ai-sheen
When to use
- Indicating loading by mirroring the shape of the content that will appear
- Reducing layout shift while data for a known structure is fetching
- Loading larger content regions where shape preview reassures the user
- Holding the place of a response an AI is still generating — set `ai`
When not to use
- Indeterminate work with no known content shape — use Spinner
- A view that is empty rather than loading — use EmptyState
How to build an accessible Skeleton in React →
Examples
Text
<Skeleton lines={3} />Avatar
<Skeleton variant="circle" width="3rem" height="3rem" />Image
<Skeleton variant="rect" height="12rem" />AI-generated content
<Skeleton ai lines={3} />Related components
- Spinner — Spinner suits indeterminate work with no content shape to preview
- EmptyState — Use EmptyState when the result is empty, not loading