Skeleton
StableA placeholder in the shape of content that is on its way, with a slow sheen passing over it. Use it while a list, a card or a figure loads, so the page holds its layout and the content lands without a jump.
Shapes
Skeleton is a block: give it a width, a height and the corners of what it stands in for. It fills the available width and is 16px tall unless told otherwise.
| Radius | Corners | Stands in for |
|---|---|---|
circle | Round | Avatars and round marks. |
pill | Fully rounded ends | Badges, buttons and lines of text. |
sm | 8px | Small blocks, such as thumbnails. |
md | 12px, the default | Fields and icon tiles. |
lg | 16px | Cards, images and chart areas. |
Text
SkeletonText is a paragraph of pill lines that vary a little in width, as real lines do, with a shorter last line. Each line takes exactly the height of a line of text at the font size around it (at the normal 1.45 line height), so when the words arrive nothing moves. The sheen falls down the lines one after another.
Orders placed before 2pm ship the same day. Collection from the showroom is free, and we will text you when it is ready.
A single line
For a name, a total or a label, use SkeletonText lines={1} inside a box as wide as the words usually are. It takes one line of height at that box's font size.
Loading a list
A list of orders while it loads: the same columns as the loaded rows, a circle for the avatar, a line for each line of text, a pill for the status. The region that is loading carries aria-busy. Switch Loaded on and off: the rows keep their height.
Recent orders
Loading a card
Only the data waits. The icon and the title do not depend on it, so they render at once; the description, the product lines and the stock badges are placeholders until the numbers arrive.
Low stock
Low stock
Two products sell out this week.
In both themes
Shapes, text and a loading row, light and dark side by side.
Guidelines
Low stock
- Match what is coming: the same columns, the same line heights, and about as many rows as usually arrive.
- Keep the chrome real. Titles, icons and buttons that do not depend on the data render straight away.
- Use
SkeletonTextfor words, even a single line: it takes exactly the height of real text. - For an action the merchant started, such as saving or sending, use a loading button, not a skeleton.
Accessibility
- Skeletons are always hidden from assistive tech.
- Put
aria-busy="true"on the region that is loading, and remove it when the content lands. - A skeleton says nothing to a screen reader. Where the wait could be long, say so in words as well, for example a visually hidden "Loading orders".
- Under reduced motion the sheen stops and the blocks hold still in the muted colour.
Props
Skeleton
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | string | '100%' | Pixels, or any CSS length. Fills the space available by default. |
height | number | string | '16px' | Pixels, or any CSS length. |
radius | 'sm' | 'md' | 'lg' | 'pill' | 'circle' | 'md' | The corners of what is loading: circle for avatars, pill for badges and text. |
SkeletonText
| Prop | Type | Default | Description |
|---|---|---|---|
lines | number | 3 | How many lines. At least one. |
lastLineWidth | number | string | '60%' | Width of the last line when there is more than one. Pixels, or any CSS length. |
Both accept every native span attribute.