Skeleton

Skeleton

import Skeleton from "@kiwicom/orbit-components/lib/Skeleton";
<Skeleton height={100} width={300} />
<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>
<Skeleton rows={3} rowOffset={15} rowHeight={10} />
<Skeleton preset="Button" />

Props

NameTypeRequiredDefaultDescription
animatebooleantrueTurn off/on animation
childrenReact.ReactNode
heightnumber \| string100%Set height for Svg element
heightnumber \| string100%Set height for Svg element
maxHeightnumber \| stringSet maxHeight for Svg element
rowBorderRadiusnumber3Border-radius for row rect elements
rowHeightnumber21pxSet height for rect elements
rowOffsetnumber20pxSet offset between rect elements
rowsnumberNumber of rect elements
titlestringloadingAdd text for svg accessible name element
presetPresetYou can pick one of predefined presets
viewBoxstringSet viewBox for Svg element
widthnumber \| string100%Width of Svg element
spaceAfter"none" \| "smallest" \| "small" \| "normal" \| "medium" \| "large" \| "largest"Additional margin-bottom after component. See this docs
dataTeststringOptional prop for testing purposes
idstringSet id for Skeleton
colorstringpaletteCloudDarkSet color for svg rect element from orbit tokens

Preset

Preset
"List"
"Image"
"Card"
"Button"
"Text"