Skeleton
Skeleton component display a placeholder preview before the data gets loaded.
To implement Separator component into your project you’ll need to add the import:
import Skeleton from "@kiwicom/orbit-components/lib/Skeleton";
After adding import into your project you can use it simply like:
<Skeleton height={100} width={300} />
or
<Skeleton><rect x="48" y="8" rx="3" ry="3" width="88" height="6" /><rect x="48" y="26" rx="3" ry="3" width="52" height="6" /><rect x="0" y="56" rx="3" ry="3" width="410" height="6" /></Skeleton>
or if you need to render only rect, you can use the row property like:
<Skeleton rows={3} rowOffset={15} rowHeight={10} />
or you can pick one from our predefined presets:
<Skeleton preset="Button" />
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| animate | boolean | true | Turn off/on animation | |
| children | React.ReactNode | |||
| height | number \| string | 100% | Set height for Svg element | |
| height | number \| string | 100% | Set height for Svg element | |
| maxHeight | number \| string | Set maxHeight for Svg element | ||
| rowBorderRadius | number | 3 | Border-radius for row rect elements | |
| rowHeight | number | 21px | Set height for rect elements | |
| rowOffset | number | 20px | Set offset between rect elements | |
| rows | number | Number of rect elements | ||
| title | string | loading | Add text for svg accessible name element | |
| preset | Preset | You can pick one of predefined presets | ||
| viewBox | string | Set viewBox for Svg element | ||
| width | number \| string | 100% | Width of Svg element | |
| spaceAfter | "none" \| "smallest" \| "small" \| "normal" \| "medium" \| "large" \| "largest" | Additional margin-bottom after component. See this docs | ||
| dataTest | string | Optional prop for testing purposes | ||
| id | string | Set id for Skeleton | ||
| color | string | paletteCloudDark | Set color for svg rect element from orbit tokens |
Preset
| Preset |
|---|
"List" |
"Image" |
"Card" |
"Button" |
"Text" |