skeleton

The Skeleton component displays a placeholder while content is loading, supporting customizable width, height styles.

Usage & Examples

Default

Loading content...
default.tsx

  <Skeleton width="100%" height="20px" />

Visual variants

Rounding

none
Loading content...
medium
Loading content...
large
Loading content...

Shadows

none
Loading content...
light
Loading content...
strong
Loading content...
visual-variants.tsx
// Rounding

  <Skeleton width="100%" height="20px" />

  <Skeleton width="100%" height="20px" />

  <Skeleton width="100%" height="20px" />

// Shadows

  <Skeleton width="100%" height="20px" />

  <Skeleton width="100%" height="20px" />

  <Skeleton width="100%" height="20px" />

Props API

15 props
Columns
skeleton props API
Default
Description
aria-busybooleanNoaria—Overrides the default busy state.
aria-describedbystringNoaria—Optional ID reference to additional descriptive content.
aria-hiddenbooleanNoaria—Allows explicit control over whether the skeleton should be exposed to assistive technology.
aria-labelstringNoaria—Optional ARIA label for the skeleton. Preferred when you want to directly label the status region.
aria-labelledbystringNoaria—Optional ID reference to an external label element.
aria-live"off" | "polite" | "assertive"Noaria—Overrides the default ARIA live politeness when announce is enabled.
classNamestringNostyling—Additional class name(s) for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
heightstring | numberNoprops"100%"Height of the skeleton loader (e.g., "100%", "50px", or a number representing pixels).
labelstringNoprops"Loading content..."Accessibility label for screen readers. Used as fallback hidden descriptive text when announce is enabled.
roleReact.AriaRoleNoaria—Optional semantic role override. Defaults to "status" when announce is enabled.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the skeleton. "none" | "small" | "medium" | "large" | "full"