<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

Loading data for skeleton_text...

SkeletonAvatar

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

React examples

Default

<SkeletonAvatar />

<SkeletonAvatar />

Custom size

<SkeletonAvatar size={48} />

<SkeletonAvatar size={48} />

Square variant

<SkeletonAvatar square />

<SkeletonAvatar square />

Props

Loading data for skeleton_avatar...

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 examples

Custom width and height

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

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

Props

Loading data for skeleton_box...