Skip to content

Skeleton

A loading stand-in that matches the shape of what is coming: text lines, rectangles, circles.

Example

<Skeleton variant="text" lines={3} label="Loading article…" />
<Skeleton variant="rect" width="100%" height="6rem" label="Loading card…" />

Props

PropTypeDefaultDescription
varianttext | rect | circulartextShape.
linesnumber3Text lines.
width / heightstring-Box size.
labelstringLoading…Announced text (explicit aria-label).

Accessibility