AlertDialog

A dialog that needs an answer before it closes.

import { AlertDialog } from 'components/UI/AlertDialog'

Confirm an action

Use danger on the button that does the destructive act, not on the button that opens the dialog. The header has no close button.

Control open to keep the dialog open while the delete runs. The button shows a spinner, and Escape does nothing until the delete ends.

The body scrolls, and the header and footer stay fixed. Set separator to draw a line above the actions.

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Use an alert dialog only when the user must decide before going on, such as confirming a delete. A click outside does not close it. For anything else, use Dialog.
Name each action by what it does, such as "Delete project", not "OK". Put each one in AlertDialog.Close, unless the dialog waits for the action.
Every alert dialog needs an AlertDialog.Title, even when you leave out the header.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
className	string	–	Classes that replace the default layout or padding.
children	ReactNode	–	The content of the dialog.

Prop	Type	Default	Description
separator	boolean	false	Adds a top divider and equal padding above and below the actions. Use it with long content.
className	string	–	Classes that replace the default layout or padding.
children	ReactNode	–	The actions of the dialog.

Prop	Type	Default	Description
children	ReactNode	–	The title text. The header labels the dialog with it.
showCloseButton	boolean	false	Shows a close button at the right of the header.
className	string	–	Classes for the header.

Prop	Type	Default	Description
container	HTMLElement \| ShadowRoot \| RefObject \| null	–	The element that the dialog renders into. The default is the document body.