Components / status

status · @awesome-ds/react

EmptyState

Empty collection with next action.

Rules: rule.interaction.product-quality

State matrix

emptyrequired

Anatomy

  • empty illustration slot
  • title
  • description
  • next action

Keyboard contract

The primary next action is the first intentional focus target in the region.

Screen-reader contract

Heading identifies the empty region and action text explains the next step.

Content rules

  • Explain why it is empty.
  • Offer one useful next action.

Public API

PropTyperequiredDescription
titlestringrequiredEmpty condition
descriptionstringrequiredExplanation
actionLabelstring—Next step
onAction() => void—Next-step callback

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

EmptyState/next-action

Live

Live

No results

Try another filter.

Copyable example

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

<EmptyState title="None" description="Add one" actionLabel="Create" />