<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5HGSQD2L" height="0" width="0" style="display:none;visibility:hidden" title="GTM"></iframe>

Skeleton Text

Placeholder boxes that resemble blocks of text, used while the real text is loading.

Skeleton Text is a graphical imitation of blocks of text, used as a placeholder while the real text is loading.

Usage

The preview has been updated.

Skeleton Text consists of at least one SkeletonTextLine. Each line will go all the way across the bounding box, except if there is more than one line; in that case, the last line will be shorter, to more convincingly look like a paragraph of text.

Setting a line's width prop to narrow will make that specific line only 33% of the width of the bounding box. This is useful for skeleton text that is meant to mimic short lines of text such as pricing info.

Skeleton Text can also contain a SkeletonTextHeading, which will take the same height as the text of the specified font size. A SkeletonTextHeading will only fill 50% of the available width, to more convincingly look like a short heading.

width

Use width="narrow" to reduce the width of the SkeletonTextLine

The preview has been updated.

Here's an example showcasing how we can show the placeholder while the actual content is loading. Notice how we are also using a zone with the loadingShimmer background to create a "skeleton image".

The preview has been updated.

Anatomy

Anatomy of the Skeleton Text
  1. Line (subcomponent)
  2. Last Line (conditionally set)
  3. Narrow (variant of Line)
  4. Heading (subcomponent)

Elements

The Skeleton Text includes the following elements:

  • Line

Variants

The Skeleton Text is available in the following variants:

Skeleton Text variant of the Skeleton Text

Line (subcomponent)

Last Line (conditionally set) variant of the Skeleton Text

Last Line (conditionally set)

Narrow (variant of Line) variant of the Skeleton Text

Narrow (variant of Line)

Heading (subcomponent) variant of the Skeleton Text

Heading (subcomponent)

Skeleton Text variants are “bones” of varying widths that can be used to skeletonize text in paragraphs, tiles, and any component that uses text.

Behaviors

Animation

The Skeleton Text animation is the same as the Loading Shimmer animation.

Sizes

The Skeleton Text height is determined by the font size of the content.

The Skeleton Text width is determined by the variant.

  • Heading: 50% of container width
  • Default: 50% of container width
  • Last Line: 75% of container width
  • Narrow: 33% of container width
Skeleton Text Width

Best practices

Visual illustration for the "Do" section

Do

  • Use Skeleton Text to represent dynamic content that is loading (e.g., product titles, prices, quantities).
  • Match the size of the Skeleton Text to the actual content.
Visual illustration for the "Don't" section

Don't

  • Don't use Skeleton Text to represent static, instantly loaded content (e.g., headings, page titles, body text).
  • Don’t use Skeleton Text as feedback for contextual actions (e.g., within buttons). Instead, use a Spinner.

Accessibility

  • Any area with Skeleton Text in it represents content that will change, so that area should have aria-live="polite".
  • While the Skeleton Text is shown and a page container is getting new content, remember to put aria-busy="true" on that container, and set it to false when done.
  • Once the element has loaded the content, either remove the Skeleton Text from the DOM, set it to aria-hidden="true" , or set its CSS display to none.

Props

SkeletonTextHeading
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
SkeletonTextLine
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.
proptyperequireddescriptiondefault
width"standard" | "narrow" | nullfalse
Width of the SkeletonTextLine Available options: "standard", "narrow"
standard
SkeletonText
This component is implemented using the <div /> as the root element. You can utilize the native attributes supported by <div /> tag. The ref is directly assigned to the root element, allowing you to access and manipulate it as needed.
See core props for additional props that can be applied to this component.