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 left plate asks "Are you sure?" and paints OK with the ink of an ordinary save. The right plate names the March invoice, keeps Cancel as the easy path, and paints Delete in vermilion.
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;
}