Skeleton

The Skeleton component is a placeholder UI element that simulates the layout of content while the actual data is being loaded.

What you need to provide

  • aria-busy="true" on the container element that will receive the new content once loading completes
  • role="status" on the skeleton composition for screen reader announcement of loading state
  • aria-label describing what's being loaded (e.g., "Loading user profile")

Color contrast

The Skeleton component indicates a UI state and must be easily perceived by all users. In order to meet the WCAG 2.1 AA guidelines for color contrast, it can be used only on the following backgrounds: background.static.flat, background.static.raised, background.static.floating, background.static.sunken.