Confirmation Alert — Cayuse Design System

Examples

Confirmation alert

html

<div class="cds-lightbox">
  <div class="cds-modal cds-modal--small" role="alertdialog" aria-modal="true"
       aria-labelledby="dc-title" aria-describedby="dc-desc">
    <div class="cds-modal__header">
      <h2 class="cds-modal__title" id="dc-title">Send this issue form?</h2>
    </div>
    <div class="cds-modal__body" id="dc-desc">
      Once sent, your issue will be logged. This cannot be undone.
    </div>
    <div class="cds-modal__footer">
      <button type="button" class="cds-button cds-button--secondary">Cancel</button>
      <button type="button" class="cds-button cds-button--primary">Send issue form</button>
    </div>
  </div>
</div>

Specification

From the artboard annotations:

The overlay is Primary Black at 25% opacity — see the Dialogs pattern.
Content padding is 24px sides, 16px top and bottom, adjustable.
“Alert dialog should always be centred (equal spacing on each side).”

Usage

When to use it

Use before an action that is irreversible or expensive to undo — submitting, deleting, sending.
State the consequence in the body: “this cannot be undone” is doing real work.
Label the confirming button with the action, not “Yes” or “OK”.
Show what is being acted on — the record name or count — so the user can tell they picked the right thing.

When not to use it

Do not use one for a reversible action. A confirmation on everything trains users to dismiss without reading.
Do not use one to deliver information — that is a Banner Alert.
Do not make Cancel the visually prominent option, or the reverse — the primary action should be the one the user came to do.
Do not let it be dismissed by clicking the overlay; a decision should be deliberate.

Confirmation is not the same as prevention

A confirmation dialog is the weakest of the safeguards available, because users learn to dismiss them. Where the action is genuinely destructive, prefer an undo window after the fact — it costs the user nothing when they were right, and saves them completely when they were wrong. Reserve confirmation for actions that truly cannot be reversed, such as submitting to an external sponsor.

Accessibility

role="alertdialog", not role="dialog" — it tells assistive technology that this dialog is a decision requiring a response.
aria-describedby points at the body so the consequence is read with the title.
Focus moves to the dialog on open. Focusing Cancel by default is the safer choice for a destructive action.
Escape cancels. It must never confirm.
Focus is trapped, and returns to the trigger on close.

Tokens consumed

Token	Applied to	Resolves to
`--container-background`	Dialog surface	`--color-white`
`--type-section-heading-*`	Title	20 / 28 / Bold
`--spacing-24` / `--spacing-16`	Content padding	24px sides, 16px top and bottom
Lightbox	Overlay	`--color-black` at 25%