Skip to content

index.mdx

Latest commit

 

History

History
124 lines (75 loc) · 3.1 KB

index.mdx

File metadata and controls

124 lines (75 loc) · 3.1 KB
title AlertDialog
description 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.
source packages/raystack/components/alert-dialog
tag new

import { playground, controlledDemo, menuDemo, discardDemo, nestedDemo } from "./demo.ts";

Anatomy

Import and assemble the component:

import { AlertDialog } from '@raystack/apsara'

<AlertDialog>
  <AlertDialog.Trigger />
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title />
    </AlertDialog.Header>
    <AlertDialog.Body>
      <AlertDialog.Description />
    </AlertDialog.Body>
    <AlertDialog.Footer>
      <AlertDialog.Close />
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog>

API Reference

Root

Groups all parts of the alert dialog.

Content

Renders the alert dialog panel overlay.

Header

Renders the alert dialog header section.

Title

Renders the alert dialog title text.

Body

Renders the main content area of the alert dialog.

Description

Renders supplementary text within the alert dialog body.

Trigger

Renders the element that opens the alert dialog.

CloseButton

Renders a button that closes the alert dialog.

Footer

Renders the alert dialog footer section.

Examples

Controlled

Example of a controlled alert dialog with custom state management.

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.

Discard Changes

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

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.

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
  • Respects motion preferences: alert dialog panel motion is enabled only when prefers-reduced-motion: no-preference