LOADING

When to Use

Example: order processing overlay

  • Indicating that an action is being processed (form submission, API call)
  • Inline loading state within buttons or input fields
  • Page or section-level loading overlay

Usage Guidelines

DO

Use Loading as a leading icon inside buttons during async actions. Match the spinner color to its surrounding context using Tailwind text color utilities

Don’t

Don't use Loading as a full-page placeholder — use Skeleton instead. Don't combine multiple Loading spinners in a single view

Accessibility

  • Renders <svg role="status" aria-label="Loading…"> — screen readers announce the loading state
  • The label prop allows customizing the accessible name per context (e.g. "Submitting form…")
  • Arc uses currentColor — inherits contrast from the parent's text color