Components / status

State matrix

Anatomy

• status container
• animated indicator
• accessible label

Keyboard contract

Not focusable; completion returns focus only when the workflow requires it.

Screen-reader contract

A concise loading label is exposed without announcing every animation frame.

Content rules

• Name what is loading.
• Avoid indefinite blocking without recovery.

Public API

Adaptation contracts

RTL

Align status copy to inline-start and keep number/value semantics locale aware.

High contrast

Expose status with text, shape, or system color rather than authored color alone.

Reduced motion

Stop looping indicators where possible and retain a textual status.

Verification IDs

Spinner/status-label

Live

Copyable example

import { Spinner } from "@awesome-ds/react";

<Spinner label="Loading" />