Confirm dialog

Confirms a destructive action, optionally by typing its name.

Guidance

Confirm dialogs stop a destructive or irreversible action until the person agrees to it. The heading states the consequence as a question ("Delete orders_daily?"), the body says exactly what is destroyed (lineage edges, owners, documentation) and what is not, and the confirm button is crimson with an icon and a word naming what is destroyed ("Delete asset"), so it can never be mistaken for the primary. Cancel is the secondary button and receives focus first, so Enter never destroys anything by accident.

With confirm-text, a mono field labelled "Type orders_daily to confirm" appears and the confirm button stays disabled until the field matches exactly (case and spaces included). Enter in the field confirms once it matches. Use it for deletions that cannot be undone and reach other people's work.

tone="default" uses the primary button for confirmations that are not destructive.

For one-off confirmations, await MmConfirmDialog.confirm({ heading, body, confirmLabel, confirmText }) creates the dialog, shows it, resolves true on confirm and false on cancel or Escape, and removes it afterwards. Focus returns to the element that was focused when it opened. It is announced as an alertdialog, named by the heading and described by the body. Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	''	States the consequence as a question: "Delete orders_daily?".
body	body	string	''	What is destroyed or changed. Use the default slot for richer content.
confirmLabel	confirm-label	string	''	Verb and object naming what is destroyed: "Delete asset". Defaults to the confirm string.
confirmIcon	confirm-icon	string	''	Icon on the confirm button. Defaults to delete when tone is danger.
cancelLabel	cancel-label	string	''	Label of the cancel button. Defaults to the cancel string.
confirmText	confirm-text	string	''	Turns on type-to-confirm: the confirm button stays disabled until the field matches this exactly.
tone	tone	'danger' | 'default'	'danger'	danger (default) or default.
open	open	boolean	false	Opens and closes the dialog. Reflects.
loading	loading	boolean	false	Shows a spinner on the confirm button while the action runs.
returnValue		string		The value the dialog last closed with: confirm, cancel, or empty for Escape and the close button.
confirmable		boolean		True when type-to-confirm is off or the typed text matches exactly.

Events

Event	Detail	Description
mm-confirm	CustomEvent<Record<string, never>>	The confirm button was activated. Cancel it to keep the dialog open (for example while the deletion runs with loading), then call close('confirm').
mm-open	CustomEvent<Record<string, never>>	The dialog opened.
mm-close	CustomEvent<DialogCloseDetail>	The dialog closed; returnValue is confirm when confirmed.
mm-request-close	CustomEvent<DialogRequestCloseDetail>	Escape or the close button asked to close. Cancelable.

Slots

Slot	Description
Default	Rich body content, in place of body.

CSS parts

Part	Description
dialog	The inner mm-dialog.
field	The type-to-confirm field.
cancel	The cancel button.
confirm	The confirm button.

Examples

Every state of mm-confirm-dialog in Storybook, with keyboard and screen reader tests.