AlertDialog

A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, it does not close on outside click, requiring explicit user action.

Anatomy

Import and assemble the component:

1import { AlertDialog } from '@raystack/apsara'
2

3<AlertDialog>
4  <AlertDialog.Trigger />
5  <AlertDialog.Content>
6    <AlertDialog.Header>
7      <AlertDialog.Title />
8    </AlertDialog.Header>
9    <AlertDialog.Body>
10      <AlertDialog.Description />
11    </AlertDialog.Body>
12    <AlertDialog.Footer>
13      <AlertDialog.Close />
14    </AlertDialog.Footer>
15  </AlertDialog.Content>
16</AlertDialog>

API Reference

Root

Groups all parts of the alert dialog.

Prop

Type

Content

Renders the alert dialog panel overlay.

Prop

Type

Header

Renders the alert dialog header section.

Prop

Type

Title

Renders the alert dialog title text.

Prop

Type

Body

Renders the main content area of the alert dialog.

Prop

Type

Description

Renders supplementary text within the alert dialog body.

Prop

Type

Trigger

Renders the element that opens the alert dialog.

Prop

Type

CloseButton

Renders a button that closes the alert dialog.

Prop

Type

Footer

Renders the alert dialog footer section.

Prop

Type

Examples

Controlled

Example of a controlled alert dialog with custom state management.

1(function ControlledAlertDialog() {
2  const [open, setOpen] = React.useState(false);
3

4  return (
5    <AlertDialog open={open} onOpenChange={setOpen}>
6      <AlertDialog.Trigger render={<Button color="danger" />}>
7        Delete Account
8      </AlertDialog.Trigger>
9      <AlertDialog.Content width={450} showCloseButton={false}>
10        <AlertDialog.Header>
11          <AlertDialog.Title>Delete Account</AlertDialog.Title>
12        </AlertDialog.Header>
13        <AlertDialog.Body>
14          <AlertDialog.Description>
15            Are you sure you want to delete your account? All of your data will

Composing with Menu

Open an alert dialog from a menu item. Since the trigger is outside the AlertDialog.Root, use the controlled open / onOpenChange props.

1(function MenuWithAlertDialog() {
2  const [dialogOpen, setDialogOpen] = React.useState(false);
3

4  return (
5    <React.Fragment>
6      <Menu>
7        <Menu.Trigger render={<Button variant="outline" />}>
8          Actions
9        </Menu.Trigger>
10        <Menu.Content>
11          <Menu.Item>Edit</Menu.Item>
12          <Menu.Item>Duplicate</Menu.Item>
13          <Menu.Separator />
14          <Menu.Item onClick={() => setDialogOpen(true)}>Delete</Menu.Item>
15        </Menu.Content>

Discard Changes

A common pattern for confirming destructive navigation. Both actions use AlertDialog.Close to dismiss the dialog.

1<AlertDialog>
2  <AlertDialog.Trigger render={<Button variant="outline" />}>
3    Discard Changes
4  </AlertDialog.Trigger>
5  <AlertDialog.Content width={400} showCloseButton={false}>
6    <AlertDialog.Header>
7      <AlertDialog.Title>Unsaved Changes</AlertDialog.Title>
8    </AlertDialog.Header>
9    <AlertDialog.Body>
10      <AlertDialog.Description>
11        You have unsaved changes. Do you want to discard them or continue
12        editing?
13      </AlertDialog.Description>
14    </AlertDialog.Body>
15    <AlertDialog.Footer>

Nested Alert Dialogs

You can nest alert dialogs for multi-step confirmation flows. When a nested alert dialog opens, the parent dialog automatically scales down and becomes slightly transparent.

1(function NestedAlertDialogExample() {
2  return (
3    <AlertDialog>
4      <AlertDialog.Trigger render={<Button color="danger" />}>
5        Delete Workspace
6      </AlertDialog.Trigger>
7      <AlertDialog.Content width={450}>
8        <AlertDialog.Header>
9          <AlertDialog.Title>Delete Workspace</AlertDialog.Title>
10        </AlertDialog.Header>
11        <AlertDialog.Body>
12          <AlertDialog.Description>
13            This will delete the workspace and all its projects. Are you sure?
14          </AlertDialog.Description>
15          <AlertDialog>

Accessibility

  • Alert dialog has role="alertdialog" and aria-modal="true"
  • Does not close on outside click (backdrop), requiring explicit user action
  • Uses aria-label or aria-labelledby to identify the dialog
  • Uses aria-describedby to provide additional context
  • Focus is trapped within the alert dialog while open