AlertDialog

Confirmation dialog built on react-aria-components — for destructive actions (e.g. deleting a shopping list). Token-driven and domain-agnostic.

import { AlertDialog } from "@evolve-storefront/ui/alert-dialog";

Design notes

Unlike Dialog this one is not dismissable by clicking the overlay: a destructive choice should be made deliberately, so it takes an explicit cancel or Escape.

Preview

DefaultOpen in Storybook ↗

Usage

Also the identity contract for the two buttons that never pass through Button — the action and the cancel borrow buttonVariants directly, which is why the invariant is enforced on the styling rather than on the component.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="tertiary" tone="destructive">{t("deleteList")}</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>{t("deleteListTitle")}</AlertDialogTitle>
      <AlertDialogDescription>{t("deleteListDescription")}</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
      <AlertDialogAction onClick={deleteList}>{t("delete")}</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

Props

Prop	Type	Description
open?	boolean	Controlled open state. Omit to let the dialog own it.
defaultOpen?	boolean
onOpenChange?	((open: boolean) => void)
children?	ReactNode

Change the layout

Pass children to AlertDialog to arrange its parts yourself. Every part is exported from @evolve-storefront/ui/alert-dialog.

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="tertiary" tone="destructive">{t("deleteList")}</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>{t("deleteListTitle")}</AlertDialogTitle>
      <AlertDialogDescription>{t("deleteListDescription")}</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
      <AlertDialogAction onClick={deleteList}>{t("delete")}</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>;

AlertDialogActionConfirms the destructive action and closes.

Prop	Type	Description
data-component?	undefined	Not a caller's to rename — see buttonProps.

Any other props go to the root element, like on a plain HTML element.

AlertDialogCancelCloses the dialog without acting.

Prop	Type	Description
data-component?	undefined	Not a caller's to rename — see buttonProps.

Any other props go to the root element, like on a plain HTML element.

AlertDialogContentThe modal panel, with role="alertdialog".

Prop	Type	Description
overlayClassName?	string
children?	ReactNode

Any other props go to the root element, like on a plain HTML element.

AlertDialogDescriptionRegisters itself so aria-describedby is only set when a description is actually rendered — a dangling reference is worse than none.

No props of its own.

AlertDialogFooterThe row of actions: cancel and confirm.

No props of its own.

AlertDialogHeaderGroups the title and the description at the top of the panel.

No props of its own.

AlertDialogTitleslot="title" is what RAC reads to label the dialog.

No props of its own.

AlertDialogTriggerOpens the dialog on click.

Prop	Type	Description
asChild?	boolean

Any other props go to the root element, like on a plain HTML element.