Zetta v0.10

Patterns

Destructive actions

Deleting, removing, revoking — actions you can't undo get the danger variant and a confirmation step. The pattern protects the user without nagging: one clear danger button, a dialog that restates the consequence, and a safe default.

Confirm before you destroy

A danger button opens a dialog. Tab is trapped; Escape or Cancel backs out.

Delete "Aurora"?
This permanently removes the project, its deployments and all of its data. This action can't be undone.

Rules of thumb

  • Use the danger variant only for irreversible or high-impact actions — not for ordinary "save" or "submit".
  • Name the action in the button: "Delete project", not "OK". The confirm button repeats the verb so it's unambiguous.
  • Cancel is the safe default — it gets focus on open, and Escape maps to it. The destructive button is never the auto-focused one.
  • State the consequence plainly in the body ("can't be undone"). For very high-stakes deletes, require the user to type the resource name to enable the button.
  • Focus returns to the trigger on close (native <dialog> handles this).