Components / status

status · @awesome-ds/react

Callout

Inline emphasis for tips or warnings.

Rules: rule.brand.content-design

State matrix

idlerequired

Anatomy

  • semantic aside
  • title
  • supporting content

Keyboard contract

Static callout content does not enter the Tab order unless it contains controls.

Screen-reader contract

Title and text are encountered in reading order; urgent alerts use a different live pattern.

Content rules

  • Lead with the takeaway.
  • Match tone to info, caution, or success meaning.

Public API

PropTyperequiredDescription
titlestringrequiredCallout heading
childrenReactNoderequiredGuidance

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

Callout/semantic-aside

Live

Live

Copyable example

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

<Callout title="Note">Details</Callout>