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.
React
const Preview = () => { return <Skeleton width={200} height={100} />; }; render(<Preview />)
- 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 |
Usage
Examples
Variants
React
const Components = () => { return ( <> <Skeleton variant='circle' width='50px' height='50px' /> <Skeleton variant='rectangle' width='100px' height='50px' /> <Paragraph> <Skeleton variant='text' width='10' /> </Paragraph> </> ); }; render(<Components />)
Usage Example
React
const UsageExample = () => { return ( <> <Skeleton height='150px' /> <div style={{ display: 'flex', gap: '10px', alignItems: 'center', padding: '5px 0 5px 0', }} > <Skeleton variant='circle' width='30px' height='30px' /> <Heading> <Skeleton variant='text'>En medium tittel</Skeleton> </Heading> </div> <Skeleton variant='text' width='140' /> </> ); }; render(<UsageExample />)
Text Variant
React
const TextEn = () => { return ( <> <div style={{ flex: '1 1 200px' }}> <Heading>A title</Heading> <Paragraph data-size='sm'> Here is a paragraph that spans multiple lines </Paragraph> </div> <div style={{ flex: '1 1 200px' }}> <Heading> <Skeleton variant='text'>A title</Skeleton> </Heading> <Paragraph data-size='sm'> <Skeleton variant='text' width={40} /> </Paragraph> </div> </> ); }; render(<TextEn />)
HTML
Put the class name ds-skeleton on a <span> with aria-hidden="true".
You change the variant with data-variant.
If you have the text variant, set data-text with as much text as you want it to imitate.
In react we use a hyphen ("-") in data-text.
The text variant should be in a <p> or heading element to get the correct font size.
If you want to set the size you can do this with the style attribute, or with CSS.
CSS variables and data attributes
| 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 |