<Stack>
  <div>
    <div>titleLarge</div>
    <SkeletonText size="titleLarge" />
  </div>


  <div>
    <div>titleMedium</div>
    <SkeletonText size="titleMedium" />
  </div>


  <div>
    <div>titleSmall</div>
    <SkeletonText size="titleSmall" />
  </div>


  <div>
    <div>bodyLarge</div>
    <SkeletonText size="bodyLarge" />
  </div>


  <div>
    <div>bodyMedium (default)</div>
    <SkeletonText size="bodyMedium" />
  </div>


  <div>
    <div>bodySmall</div>
    <SkeletonText size="bodySmall" />
  </div>


  <div>
    <div>subtitle</div>
    <SkeletonText size="subtitle" />
  </div>
</Stack>

<Stack>
  <div>
    <div>titleLarge</div>
    <SkeletonText size="titleLarge" />
  </div>

  <div>
    <div>titleMedium</div>
    <SkeletonText size="titleMedium" />
  </div>

  <div>
    <div>titleSmall</div>
    <SkeletonText size="titleSmall" />
  </div>

  <div>
    <div>bodyLarge</div>
    <SkeletonText size="bodyLarge" />
  </div>

  <div>
    <div>bodyMedium (default)</div>
    <SkeletonText size="bodyMedium" />
  </div>

  <div>
    <div>bodySmall</div>
    <SkeletonText size="bodySmall" />
  </div>

  <div>
    <div>subtitle</div>
    <SkeletonText size="subtitle" />
  </div>
</Stack>

With max width

<SkeletonText maxWidth="45ch" />

<SkeletonText maxWidth="45ch" />

Props

Name	Required	Description
size		`'display' \| 'titleLarge' \| 'titleMedium' \| 'titleSmall' \| 'bodyLarge' \| 'bodyMedium' \| 'bodySmall' \| 'subtitle'` Size of the text that the skeleton is replacing.
lines		`number` Number of lines of skeleton text to render.
maxWidth		`string` Maximum width that the line(s) of skeleton text can take up. Accepts any valid CSS `max-width` value.
className		`string` Class name for custom styling.

SkeletonAvatar

SkeletonAvatars are placeholders for loading Avatars. They support the same variants as the Avatar component.

React

draftNot reviewed for a11y

Storybook|Source

Figma

View in Figma|

React examples

Default

<SkeletonAvatar />

<SkeletonAvatar />

Custom size

<SkeletonAvatar size={48} />

<SkeletonAvatar size={48} />

Square variant

<SkeletonAvatar square />

<SkeletonAvatar square />

Props

Name	Required	Description
size		`number \| { narrow?: number; regular?: number; wide?: number; }` The size of the avatar in pixels.
square		`boolean` If true, the avatar will be square instead of circular.
className		`string` Class name for custom styling.

SkeletonBox

A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images) that are still loading. You can adjust width and height to match the content's dimensions.

React

draftNot reviewed for a11y

Storybook|Source

Figma

View in Figma|

React examples

Custom width and height

<SkeletonBox sx={{height: '4rem', width: '300px'}} />

<SkeletonBox sx={{height: '4rem', width: '300px'}} />

Props

Name	Required	Description
width		`string` Width of the skeleton box. Accepts any valid CSS `width` value.
height		`string` Height of the skeleton box. Accepts any valid CSS `height` value.
className		`string` The className of the skeleton box
sx		`SystemStyleObject`