AlertDialog

A modal confirmation dialog for destructive or irreversible actions.

Examples

Default

Delete item

Delete item?

This action cannot be undone.

CancelDelete

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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?"
      />
    </>
  );
}

Least Destructive Initial Focus

Reopen alert dialog

Delete item?

Cancel receives initial focus, and the header has no implicit close action.

CancelDelete

() => {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <>
      <Button label="Reopen alert dialog" onClick={() => setIsOpen(true)} />
      <AlertDialog
        actionLabel="Delete"
        description="Cancel receives initial focus, and the header has no implicit close action."
        isOpen={isOpen}
        onAction={() => setIsOpen(false)}
        onOpenChange={setIsOpen}
        title="Delete item?"
      />
    </>
  );
}

Loading Action

Delete item

Delete item?

This action cannot be undone.

CancelDeleteLoading

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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?

This action cannot be undone.

No, keep itDelete

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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?

Archived projects can be restored later.

CancelArchive

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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

This dialog uses a custom width of 600px.

CancelConfirm

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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?

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

() => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <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

() => {
  const alert = useAlertDialog();

  return (
    <>
      <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	SizeValue	400	Dialog width. Numbers are pixels, strings are used as-is.