Components / overlay

overlay · @awesome-ds/react

Dialog

Modal dialog with Escape dismiss and labelled title.

Rules: rule.a11y.wcag-aa, rule.components.state-matrix

State matrix

openrequired
closedrequired

Anatomy

  • modal overlay
  • labelled dialog
  • title
  • content
  • close action

Keyboard contract

Focus moves inside, Tab is contained, Escape closes, and focus returns to the trigger.

Screen-reader contract

role=dialog and the title identify a modal context.

Content rules

  • Use a task-specific title.
  • Keep the primary action visible and unambiguous.

Public API

PropTyperequiredDescription
openbooleanrequiredControlled visibility
onClose() => voidrequiredDismiss callback
titlestringrequiredAccessible title
childrenReactNoderequiredDialog content
closeLabelstring—Localized close action label

Adaptation contracts

RTL
Use logical action alignment and preserve the safe primary/cancel reading order.
High contrast
Separate overlay, surface, focus, and actions with system-color boundaries.
Reduced motion
Open and close instantly or with opacity only; focus timing remains deterministic.

Verification IDs

Dialog/escape-focus-restore, Dialog/localized-labels

Live

Live

Copyable example

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

<Dialog open title="Confirm" onClose={() => {}}>Body</Dialog>