Skeleton Text

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

UsageGuidelinesAPI

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

Usage

<SkeletonText>
  <SkeletonTextHeading fontSize="5"></SkeletonTextHeading>
  <SkeletonTextLine></SkeletonTextLine>
  <SkeletonTextLine></SkeletonTextLine>
  <SkeletonTextLine></SkeletonTextLine>
</SkeletonText>

<SkeletonText>
  <SkeletonTextHeading fontSize="5"></SkeletonTextHeading>
  <SkeletonTextLine></SkeletonTextLine>
  <SkeletonTextLine></SkeletonTextLine>
  <SkeletonTextLine></SkeletonTextLine>
</SkeletonText>

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 text of the specified font size. A SkeletonTextHeading will only fill 50% of the available width, to more convincingly look like a short heading.

Anatomy

Line (subcomponent)
Last Line (conditionally set)
Narrow (variant of Line)
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)

Narrow (variant of Line)

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

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.

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

See core props for additional props that can be applied to this component.

prop	type	required	description	default
width	`"standard" \| "narrow" \| null`	false	Width of the SkeletonTextLine Available options: "standard", "narrow"	standard

SkeletonText

See core props for additional props that can be applied to this component.