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
| Prop | Type | Default | Description |
|---|---|---|---|
| width | string | "100%" | Width of the skeleton placeholder (e.g., '100%', '150px'). |
| height | string | "100%" | Height of the skeleton placeholder (e.g., `100%', '20px'). |
| rounding | "none" | "small" | "medium" | "large" | Configured Default | Border radius for the skeleton. |
| shadow | "none" | "light" | "medium" | "strong" | "intense" | Configured Default | Shadow style for the skeleton. |
| label | string | "Loading content..." | ARIA label for screen readers. |
| className | string | - | Additional custom class names. |
| data-testid | string | "skeleton-loader" | Test id for querying the component in tests. |