AlertDialog
Overlay that stops the user until they cancel or confirm.
Master
Open the dialog, then switch size and action intent. Escape cancels. Clicking the backdrop does not.
Usage
Use AlertDialog when the user must choose before going on, like leaving with unsaved changes or deleting something. Use Callout for a message on the page. Escape cancels. Clicking the backdrop does nothing. See contracts/alertdialog.json for the full contract. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page.
Do's
- Confirming an action that cannot be undone.
- A decision the user must answer before the page goes on.
Don'ts
- Do not invent a local confirm dialog or use window.confirm.
- Do not put forms, tables or extra actions inside.
- Do not add a close X or close on backdrop click.
- Do not wrap the two Buttons in a ButtonGroup. They stay separate with a gap.
- Do not add a second strong Button. The action Button is the one strong brand or strong danger Button.
- Do not use raw hex.
<AlertDialog
open={open}
title="Leave this page?"
description="You have unsaved changes. Continue without saving?"
actionLabel="Continue"
actionIntent="brand"
size="md"
onCancel={close}
onAction={confirm}
/>