A destructive confirm names the thing that will be lost. "Delete the March invoice?" tells you which record. "Are you sure?" does not. The next line states the consequence in plain words: this cannot be undone. A joke, a pun, or a soft phrase hides the risk at the moment the person most needs a clear sentence.
Cancel is the easy action. It is the ordinary ink button, the one a mistaken click should land on. The confirm button says Delete, not OK, and it uses the danger colour. Do not paint it with the same colour as Save. If save and delete look alike, the dangerous action hides inside the habit of the safe one.
The demo is that dialogue. Cancel is ink. Delete is vermilion. The title names the March invoice.
How to check it
- Cover the buttons. The title still names the object and says what happens to it.
- Press the easy path. Cancel is the ordinary button, and a stray confirm is not the same control as Save.
- Compare Delete with Save on the same product. They do not share a fill.
.cancel {
border: 1px solid var(--fg);
background: var(--fg);
color: var(--bg);
border-radius: 0;
}
.delete {
border: 1px solid var(--accent);
background: var(--accent);
color: var(--bg);
border-radius: 0;
}