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`	`— · false · —`	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`	—	Wrap a single element, such as a Button, to open or to close the dialog.
`AlertDialog.Content`	`div props`	—	The portalled, focus-trapped panel.
`AlertDialog.Header / Body / Footer`	`children · className`	—	Layout regions. The Footer holds the actions that resolve the dialog.
`AlertDialog.Title / AlertDialog.Description`	`children · className`	—	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#