Components
VersionLoading…
Skeleton
Content-shaped placeholders for data that is still loading.
Shape skeletons like the content they replace. A row with three real columns gets three bars at those column widths; it does not become one grey block.
<Skeleton width={180} label="Loading managed accounts" />
<Skeleton variant="circle" width={24} height={24} label="Loading account action" />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
variant | text | rect | circle | text | Placeholder shape |
width | number | string | 100% | Any CSS length; numbers become pixels |
height | number | string | variant default | Text 12px, circle 24px; provide it for rect |
count | number | 1 | Repeats the shape with an 8px gap |
animate | boolean | true | Disables shimmer for static output |
label | string | — | Accessible loading announcement |
Skeleton is for loading, not absence or failure. Use EmptyState for an empty result and Alert for an error. Motion stops automatically when the user prefers reduced motion.