Dialog

A wrapper around React Aria’s DialogTrigger, Modal, and Dialog components. Focus is trapped inside the dialog while it is open and returns to the trigger on close.

Add via CLI

npx @a2ra/cli add dialog

Basic

Alert dialog

Example JSON

{
  "type": "Dialog",
  "props": {
    "triggerLabel": "Delete account",
    "title": "Delete account",
    "description": "This will permanently delete your account and all data.",
    "role": "alertdialog",
    "isDismissable": false
  },
  "children": [
    {
      "type": "Flex",
      "props": { "gap": "sm", "justify": "end" },
      "children": [
        { "type": "Button", "props": { "variant": "secondary" }, "children": "Cancel" },
        { "type": "Button", "props": { "variant": "danger" }, "children": "Delete" }
      ]
    }
  ]
}

Props

Prop	Type	Description
triggerLabel	string	Label for the button that opens the dialog
title	string	Dialog heading
description	string	Supporting text shown below the title
role	dialog default alertdialog	ARIA role (alertdialog prevents dismissal by clicking outside)
isDismissable	true default false	Allow closing by clicking the backdrop
isKeyboardDismissDisabled	true false default	Prevent Escape from closing
isOpen	boolean	Controlled open state
defaultOpen	true false default	Open on mount
children	node[]	Content rendered inside the dialog body

Notes

• role: "alertdialog" tells screen readers this is a message requiring attention; it also disables backdrop-click dismissal regardless of isDismissable.
• Focus is trapped inside the dialog and returns to the trigger on close.
• Escape closes the dialog by default unless isKeyboardDismissDisabled is true.