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} />

<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	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	`enum`		Additional `margin-bottom` after component.
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

enum

spaceAfter
`"none"`
`"smallest"`
`"small"`
`"normal"`
`"medium"`
`"large"`
`"largest"`

Preset

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