Skip to main content

Skeleton

Placeholder shapes that match the final layout, so the page does not jump when content arrives.

Left out of Accessible first Spinner already says the page is working. Accessible first keeps one clear way to do each thing, so a second loading state is not added. Use instead: Spinner

See it live​

Start Storybook to see it live: npm run storybook
Live from StorybookOpen Skeleton in StorybookSee it in dark

When to use it​

  • Use it when: Lists, cards, dashboards and tables whose shape is known.
  • Not when: A wait with no layout (spinner), or a region that loaded empty (empty).

Instead:

  • Spinner: A wait with no layout.
  • Empty: Loaded, with nothing to show.

Words​

  • Use common words. Explain any term you must use.
  • One idea per sentence. Put the action first.
  • Never blame the person.
  • Use: Continue, Change, Start, You. Avoid: Invalid, Utilise, Submit, Error code.

The labels components use, from the voice tokens:

  • content.action.commit: Continue
  • content.action.cancel: Go back
  • content.action.destroy: Delete
  • content.action.retry: Try again
  • content.action.empty-action: Start a new application

See Voice and tone for the whole voice.

Accessibility and keyboard​

Test before you ship:

  • The region says it is loading; the shapes themselves are hidden from screen readers. undefined

Use it in code​

npx open-ds add skeleton

The component reads only component keys and semantic tokens, so it follows the brand and mode on <html>.

Tokens it reads​

Skeleton reads 2 tokens of its own, each an alias of a semantic token. Each row is one part: its own token, the semantic it aliases, and the value it ends at. Change a semantic and every component that reads it follows; override one of Skeleton's tokens to change Skeleton alone.

Changes with theme

Accessible first decides what changes when you switch theme. Here a switch changes colors only, so the marked rows differ between light and dark; everything else holds steady.

PartIts token and the semantic it aliasesValue
Skeleton
Cornercomponent.skeleton.radiusradius.controlvar(--skeleton-radius)radius.6:0.375rem
Fill
Changes with theme		component.skeleton.backgroundcolor.surface.sunkenvar(--skeleton-background)Lightgray.light.100:#EDEDEDDarkgray.dark.100:#222222