Components
Skeleton
Skeleton is used to indicate that content on a page is loading. It provides the user with a visual hint of what the content will eventually look like.
HTML
Unable to parse html
const Preview = () => { return <Skeleton width={200} height={100} />; }; render(<Preview />)
Usage
Add the class name ds-skeleton to a <span> with aria-hidden="true".
Change the variant with data-variant, and use data-text for the text variant.
You can set the size with the style attribute or CSS.
CSS variables and data attributes
Sizes are controlled with data-size and colors with data-color. The component will inherit from the closest parent where these are set.
| Name | Value |
|---|---|
| --dsc-skeleton-animation-duration | 0.8s |
| --dsc-skeleton-animation | ds-skeleton-opacity-fade var(--dsc-skeleton-animation-duration) linear infinite alternate |
| --dsc-skeleton-background | var(--ds-color-neutral-surface-tinted) |
| Name | Value |
|---|---|
| data-variant | circle, text |
React
- width
- Description
The width of the component
- Type
string | number
- height
- Description
The height of the component
- Type
string | number
- variant
- Description
The shape variant
- Type
"rectangle" | "circle" | "text"- Default
rectangle
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
- characters
- Description
@deprecated This prop has no effect. Use `width` or supply text as children instead
- Type
number
| Name | Type | Default | Description |
|---|---|---|---|
| width | string | number | - | The width of the component |
| height | string | number | - | The height of the component |
| variant | "rectangle" | "circle" | "text" | rectangle | The shape variant |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
| characters | number | - | @deprecated This prop has no effect. Use `width` or supply text as children instead |