Skeleton

A loading placeholder. Purely decorative (aria-hidden) — wrap the group it stands in with your own aria-busy/live region if the loading state itself needs to be announced.

<Skeleton />

Examples

Shape a group of skeletons to roughly match the content they stand in for — a heading-sized bar above a couple of narrower text-sized ones reads as "a card is loading" better than uniform blocks:

<Column gap="8" aria-busy="true">
  <Skeleton width="128" height="24" />
  <Skeleton width="full" height="16" />
  <Skeleton width="full" height="16" />
</Column>

circle gives a circular skeleton sized to match an Avatar while its real image is still loading:

<Skeleton circle width="40" height="40" />

Props