Client component

Alert Dialog

A Modal with forced-choice semantics for delete confirmations, unsaved changes and destructive actions. The panel announces as an alertdialog, clicking the overlay does not dismiss it, and there is deliberately no corner X. The user resolves it through the Footer actions (Esc still cancels, per the ARIA pattern).

import { AlertDialog, Button } from "astralis-ui";

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialog.Trigger>
        <Button colorScheme="error" variant="outline">
          Delete workspace
        </Button>
      </AlertDialog.Trigger>
      <AlertDialog.Content>
        <AlertDialog.Header>
          <AlertDialog.Title>Delete this workspace?</AlertDialog.Title>
          <AlertDialog.Description>
            All projects, members and settings will be permanently removed.
            This action cannot be undone.
          </AlertDialog.Description>
        </AlertDialog.Header>
        <AlertDialog.Footer>
          <AlertDialog.Close>
            <Button variant="outline" colorScheme="gray">
              Cancel
            </Button>
          </AlertDialog.Close>
          <AlertDialog.Close>
            <Button colorScheme="error">Delete workspace</Button>
          </AlertDialog.Close>
        </AlertDialog.Footer>
      </AlertDialog.Content>
    </AlertDialog>
  );
}

size

centeredcloseOnOverlayClickcloseOnEsc

import { AlertDialog, Button } from "astralis-ui";

<AlertDialog>
  <AlertDialog.Trigger>
    <Button colorScheme="error" variant="outline">Delete workspace</Button>
  </AlertDialog.Trigger>
  <AlertDialog.Content>
    <AlertDialog.Header>
      <AlertDialog.Title>Delete this workspace?</AlertDialog.Title>
      <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
    </AlertDialog.Header>
    <AlertDialog.Footer>
      <AlertDialog.Close>
        <Button variant="outline" colorScheme="gray">Cancel</Button>
      </AlertDialog.Close>
      <AlertDialog.Close>
        <Button colorScheme="error">Delete</Button>
      </AlertDialog.Close>
    </AlertDialog.Footer>
  </AlertDialog.Content>
</AlertDialog>

Import#

import { AlertDialog } from "astralis-ui";

The parts are Modal's parts: same context, same styling, same composition. Only the root differs, so everything on the Modal page (sizes, centering, controlled state) applies here unchanged.

Props#

Modal's props, with overlay dismissal off by default:

Prop	Type	Default	Description
`open · defaultOpen · onOpenChange`	`boolean · boolean · (open: boolean) => void`	`None · false · None`	Controlled / initial state, and the change callback.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Panel width.
`centered`	`boolean`	`true`	Centers the panel vertically.
`closeOnOverlayClick`	`boolean`	`false`	Off by default, unlike Modal: the user has to choose an action.
`closeOnEsc`	`boolean`	`true`	Escape cancels, as the ARIA pattern expects.

Parts#

There is deliberately no AlertDialog.CloseButton: the dialog resolves through the actions in its Footer.

Prop	Type	Default	Description
`AlertDialog.Trigger / AlertDialog.Close`	`children: ReactElement`	None	Wrap a single element, such as a Button, to open or to close the dialog.
`AlertDialog.Content`	`div props`	None	The portalled, focus-trapped panel.
`AlertDialog.Header / Body / Footer`	`children · className`	None	Layout regions. The Footer holds the actions that resolve the dialog.
`AlertDialog.Title / AlertDialog.Description`	`children · className`	None	Wired to aria-labelledby and aria-describedby.

Keyboard#

Key	Action
`Esc`	Cancel and close (opt out with `closeOnEsc={false}`)
`Tab` / `Shift+Tab`	Cycle focus between the actions; it can't leave the dialog
`Enter` / `Space`	Activate the focused action

On open, focus moves to the first focusable element inside the panel; on close it returns to the trigger.

Alert Dialog

Import#

Relationship to Modal#

Props#

Parts#

Keyboard#