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