Spinner

A Spinner indicates that something is loading, and users can't interact with the interface just yet.

What the component handles

  • role="status" for screen reader announcement of loading state
  • Loading text provided via <title> element for assistive technology

What you need to provide

  • role="true" on the container element that will receive the new content once loading completes
  • ?? Alternative label for each Tab when using only icons as children.

Color contrast

Meets the AA color contrast ratio requirements and can be used on the following:

  • background.static.xxx tokens except for background.static.inverse and background.static.on-color,
  • in all Card variants,