Skeleton

import { Skeleton } from 'yarcl';

<Card aria-busy={loading}>
  <Stack gap="sm">
    <Skeleton textStyle="subheading" width="50%" />
    <Skeleton lines={2} />
    <Skeleton shape="control" size="sm" width="4.5rem" />
  </Stack>
</Card>

Shape	Size
`text`	lines matching a text style’s font size and line height
`control`	the height of a control of the given `size`
`circle`	the control height of `size`, as a circle
`rect`	`width` and `height`

Because shapes come from the same tokens as the content, the layout doesn’t jump when the content arrives. Skeletons are hidden from screen readers; mark the loading region with aria-busy.

Props

Prop	Type	Default	Description
`height`	`string`		Height as a CSS length, for `shape="rect"`.
`lines`	`number`		Number of lines for `shape="text"`. The last line is shorter.
`radius`	`'size' \| Radius`config	`config.defaults.radius`	Corner radius for `control` and `rect`, from the `radii` config.
`shape`	`'text' \| 'circle' \| 'rect' \| 'control'`	`'text'`	`text`: lines matching a text style; `control`: the height of a control of the given `size`; `circle`: a circle, e.g. for an avatar; `rect`: a block sized by `width` and `height`.
`size`	`Size`config	`config.defaults.size`	Control size, from the `sizes` config. Sets the height for `shape="control"` and the diameter for `shape="circle"`.
`textStyle`	`TextStyle`config	`config.defaults.textStyle`	Text style whose font size and line height the lines match, for `shape="text"`.
`width`	`string`		Width as a CSS length.