Dialogs and confirmation

Use a dialog for a decision that needs full attention, and confirm anything that cannot be undone.

Dialog from @/ui is the panel only: title, body, and Cancel and Confirm buttons. The screen that opens it supplies the scrim, closes it on Escape and on a click outside, and gives it role="dialog".

{open && (
  <div className="page-dialog__scrim" onClick={close}>
    <div role="dialog" aria-modal="true" aria-label="Delete this page?" onClick={(e) => e.stopPropagation()}>
      <Dialog
        title="Delete this page?"
        confirmLabel="Delete page"
        onClose={close}
        onCancel={close}
        onConfirm={remove}
      >
        <p>“Demo page” is live at pages.petavue.com/demo. Deleting it takes it offline, and the LinkedIn demo ads that point to it will show an error page.</p>
      </Dialog>
    </div>
  </div>
)}

When to use one

To confirm an action that cannot be undone, or that affects other people (deleting, unpublishing, sending).
For a short, focused task with a clear end, such as renaming or publishing.

Do not use a dialog for information people need to keep referring to, or for long multi-step work. Use a page or a side panel.

Writing a confirmation

The title is the question: "Delete this page?"
The body says what will happen, with the specific thing named: which page, which campaign, how many people.
The confirm button repeats the action: "Delete page", not "OK" or "Yes".

Dialog's confirm button is always the primary blue, and its warning and error states disable it, so it cannot show a working red Delete button yet. Until it can, name the action clearly in the button and the body.

Behaviour

Escape and a click on the scrim close the dialog without acting.
Move focus into the dialog when it opens, and back to the button that opened it when it closes.
Only one dialog at a time.

When to use oneCopy Anchor Link

Writing a confirmationCopy Anchor Link

BehaviourCopy Anchor Link

On this page

When to use one

Writing a confirmation

Behaviour