Default
Loading content...
default.tsx
<Skeleton width="100%" height="20px" />skeleton
The Skeleton component displays a placeholder while content is loading, supporting customizable width, height styles.
Usage & Examples
Props API
15 props
Columns
Default | Description | ||||
|---|---|---|---|---|---|
aria-busy | boolean | No | aria | — | Overrides the default busy state. |
aria-describedby | string | No | aria | — | Optional ID reference to additional descriptive content. |
aria-hidden | boolean | No | aria | — | Allows explicit control over whether the skeleton should be exposed to assistive technology. |
aria-label | string | No | aria | — | Optional ARIA label for the skeleton. Preferred when you want to directly label the status region. |
aria-labelledby | string | No | aria | — | Optional ID reference to an external label element. |
aria-live | "off" | "polite" | "assertive" | No | aria | — | Overrides the default ARIA live politeness when announce is enabled. |
className | string | No | styling | — | Additional class name(s) for custom styling. |
data-testid | string | No | testing | — | Backward-compatible alias for test ID attributes. |
height | string | number | No | props | "100%" | Height of the skeleton loader (e.g., "100%", "50px", or a number representing pixels). |
label | string | No | props | "Loading content..." | Accessibility label for screen readers. Used as fallback hidden descriptive text when announce is enabled. |
role | React.AriaRole | No | aria | — | Optional semantic role override. Defaults to "status" when announce is enabled. |
rounding | RoundingType | No | styling | configured default rounding (fallback: "medium") | Rounding of the skeleton. "none" | "small" | "medium" | "large" | "full" |