Overview
Skeleton shows the shape of what is coming while data loads. People see where things will appear, and the page moves less when the data arrives.
- Shapes —
line for a line of text, block for a field, badge or chart, circle for a dot or a donut
- Hidden from screen readers — every shape is
aria-hidden. Wrap them in Skeleton.Region, which marks the area aria-busy and announces one hidden message
- Slow pulse — fades with the
loop motion token. With reduced motion it stays still
Shapes
Loading a card
Props
| Prop | Type | Default | Required | Description |
|---|
shape | 'line' | 'block' | 'circle' | 'line' | No | line holds a line of text, block holds a field, badge or chart, circle holds a dot or a donut |
width | string | number | - | No | Width. Numbers are pixels. line and block fill the parent when it is not set |
height | string | number | - | No | Height. Numbers are pixels |
Skeleton.Region
| Prop | Type | Default | Required | Description |
|---|
children | ReactNode | - | Yes | The shapes, laid out like the content that is coming |
label | string | 'Loading…' | No | Hidden message that screen readers announce once |
Specification
base
| 상태 | 요소 | 속성 | 값 |
|---|
| enabled | root | backgroundColor | $color.background.skeleton.default |
shape=line
| 상태 | 요소 | 속성 | 값 |
|---|
| enabled | root | borderRadius | $size.radius.100 |
| enabled | root | height | 14px토큰 아님 — Body Small line. Pass height to match other text sizes |
shape=block
| 상태 | 요소 | 속성 | 값 |
|---|
| enabled | root | borderRadius | $size.radius.200 |
| enabled | root | height | 32px토큰 아님 — same height as Button and Select |
shape=circle
| 상태 | 요소 | 속성 | 값 |
|---|
| enabled | root | borderRadius | $size.radius.full |
| enabled | root | width | 16px토큰 아님 — status dot size. Pass width and height for a donut |
| enabled | root | height | 16px토큰 아님 — status dot size. Pass width and height for a donut |
Guidelines
- Only data becomes a skeleton. Page titles, buttons, tabs and section headings stay as real text.
- Show at most three repeated items, such as cards in a list. Do not imitate the real count.
- Show skeletons only for the first load. When data is already on screen, keep it while refreshing.
- Give lines different widths (100%, 75%, 45%) so the shape reads as text.