Components / status

status · @awesome-ds/react

Skeleton

Loading placeholder matching content geometry.

Rules: rule.interaction.product-quality

State matrix

loadingrequired

Anatomy

  • geometry-matched placeholder blocks

Keyboard contract

Never focusable and never blocks keyboard navigation to already available content.

Screen-reader contract

Decorative geometry is hidden; the owning region supplies one loading announcement.

Content rules

  • Match the expected layout.
  • Do not use skeletons for sub-second updates.

Public API

PropTyperequiredDescription
widthstring—Expected block width
heightstring—Expected block height

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

Skeleton/hidden-placeholder

Live

Live

Copyable example

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

<Skeleton height="2rem" />