SkeletonLine

A line of words on its way: a pill in the skeleton's sheen, as tall as the line it waits for, so nothing moves when the words come. A page's loading state is the page itself — its title, its headers, its buttons — with these where its data will be.

Widths

In a line of text

Friday, October 9

API

PropTypeDefaultDescription
width"xs" | "sm" | "md" | "lg" | "xl""md"About as wide as the words it stands for; xl for a full line in a chat bubble.

Guidelines

  • Only for data: a title, a column's header or a button the page always has shows as itself, never as a skeleton.
  • It takes the line height of the text around it: put it where the words go, in the same text size.
  • Hidden from screen readers; the page's loading state says it's on its way once, not per line.