Skeleton

This component provides a placeholder while you wait for the content to load. The width and height of this component are fully customizable.

Skeleton

<Skeleton height="24px" width="360px" />

SkeletonAvatar

This component provides a placeholder for the Avatar component.

<>
  <SkeletonAvatar size="s" variant="square" />
  <SkeletonAvatar size="m" variant="square" />
  <SkeletonAvatar size="l" variant="square" />
  <SkeletonAvatar size="s" variant="circle" />
  <SkeletonAvatar size="m" variant="circle" />
  <SkeletonAvatar size="l" variant="circle" />
</>

SkeletonButton

This component provides a placeholder for the Button component. The ButtonSkeleton can be used as is or with a custom width. The height cannot be changed and fits with the Button component.

<>
  <SkeletonButton />
  <SkeletonButton width="360px" />
</>

SkeletonCheckbox

This component provides a placeholder for the Checkbox component. The height and width are fixed to fit with the Checkbox component.

<SkeletonCheckbox />

SkeletonTable

This component provides a placeholder for the Table component. Like the Table component, some customization options are available:

• The rowHeight prop changes the size of the rows
• The withHeader prop displays the header if needed
• The numberOfRows prop allows to specify the number of rows to display (defaults to 5)

<SkeletonTable
  numberOfRows={5}
  columns={[
    {
      cell: (
        <>
          <SkeletonCheckbox className="mr-16" />
          <SkeletonText width="80%" />
        </>
      ),
      header: (
        <>
          <SkeletonCheckbox className="mr-16" />
          <SkeletonText width="50%" />
        </>
      ),
    },
  ]}
  withHeader
/>

SkeletonTag

This component provides a placeholder for the Tag component. The TagSkeleton can be used as is or with a custom width. The height cannot be changed and fits with the Tag component.

<>
  <SkeletonTag />
  <SkeletonTag width="360px" />
</>

SkeletonText

This component provides a placeholder for the Text component. Five different sizes are provided.

<>
  <SkeletonText size="s" />
  <SkeletonText size="m" />
  <SkeletonText size="l" />
  <SkeletonText size="xl" />
  <SkeletonText size="xxl" />
</>