AlertDialog

A modal confirmation dialog for destructive or irreversible actions.

Examples

Default

Delete item

Delete item?

Close

This action cannot be undone.

CancelDelete

<>
  <Button label="Delete item" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Delete"
    description="This action cannot be undone."
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Delete item?"
  />
</>

Loading Action

Delete item

Delete item?

Close

This action cannot be undone.

CancelDeleteLoading

<>
  <Button label="Delete item" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Delete"
    description="This action cannot be undone."
    isActionLoading
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Delete item?"
  />
</>

Custom Cancel Label

Delete item

Delete item?

Close

This action cannot be undone.

No, keep itDelete

<>
  <Button label="Delete item" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Delete"
    cancelLabel="No, keep it"
    description="This action cannot be undone."
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Delete item?"
  />
</>

Primary Action

Archive project

Archive project?

Close

Archived projects can be restored later.

CancelArchive

<>
  <Button label="Archive project" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Archive"
    actionVariant="primary"
    description="Archived projects can be restored later."
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Archive project?"
  />
</>

Custom Width

Open wide dialog

Wide dialog

Close

This dialog uses a custom width of 600px.

CancelConfirm

<>
  <Button label="Open wide dialog" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Confirm"
    description="This dialog uses a custom width of 600px."
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Wide dialog"
    width={600}
  />
</>

Long Content

Delete project

Are you sure you want to permanently delete this project and all of its contents?

Close

This action will permanently delete all associated data, including files, comments, activity history, and any linked resources. Once deleted, this information cannot be recovered. Please make sure you have backed up anything you need before proceeding.

CancelDelete

<>
  <Button label="Delete project" onClick={() => setIsOpen(true)} />
  <AlertDialog
    actionLabel="Delete"
    description="This action will permanently delete all associated data, including files, comments, activity history, and any linked resources. Once deleted, this information cannot be recovered. Please make sure you have backed up anything you need before proceeding."
    isOpen={isOpen}
    onAction={() => setIsOpen(false)}
    onOpenChange={setIsOpen}
    title="Are you sure you want to permanently delete this project and all of its contents?"
  />
</>

Imperative

Open imperative alert

<>
  <Button
    label="Open imperative alert"
    onClick={() =>
      alert.show({
        actionLabel: 'Archive',
        actionVariant: 'primary',
        description: 'Archived projects can be restored later.',
        onAction: alert.hide,
        title: 'Archive project?',
      })
    }
  />
  {alert.element}
</>

API

AlertDialog

A modal confirmation dialog for destructive or irreversible actions.

Prop	Type	Default	Description
actionLabel*	string	—	Action button label.
actionVariant	"destructive" | "primary"	'destructive'	Visual variant for the action button.
cancelLabel	string	'Cancel'	Cancel button label.
className	string	—	Additional CSS class names applied to the dialog.
data-testid	string	—	Test ID applied to the dialog.
description*	string	—	Consequence description.
isActionLoading	boolean	false	Whether the action button is loading.
isOpen*	boolean	—	Whether the dialog is open.
onAction*	() => void	—	Called when the primary action is clicked.
onOpenChange*	(isOpen: boolean) => void	—	Called when the dialog requests an open-state change.
ref	Ref<HTMLDialogElement>	—	Ref forwarded to the dialog element.
style	CSSProperties	—	Inline styles applied to the dialog.
title*	string	—	Dialog title.
width	number | string	400	Dialog width. Numbers are treated as pixels.