Skeleton
Placeholder shapes that hold a layout's geometry while its data is still loading.
Variants
Match the real shape
A skeleton earns its keep by reserving the exact space the loaded content will take. If the placeholder and the real thing are different heights, you've just moved the layout shift rather than removed it.
Table rows
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'text' | 'rect' | 'circle' | 'text' | Shape. Text gets a line-height-sized bar, circle a fully rounded one. |
| width | string | number | Defaults to 100% for text/rect, and to the size for circle. Percentages work. | |
| height | string | number | Defaults to 1em for text, 100% for rect, and the size for circle. |
Why it works this way
Why
- A skeleton keeps the layout stable and tells people what content is arriving, which a spinner can't.
Don't
- Don't use it for an action with no visible content, such as saving. Use Spinner.