C&C Docs
Log in

cnc-confirm-button

A button that asks first. It renders a cnc-button trigger and a cnc-popup anchored under it; the action only reaches your page as a confirm event once the reader has said yes. Every button property is forwarded to the trigger, so a confirm button looks and sizes exactly like the plain button it replaces.

Quick start

Describe the button with the usual button properties, describe the question with the confirm-* ones, and listen for confirm. Nothing else fires — a cancel or a click away is silent.

(nothing confirmed yet) 
<cnc-confirm-button
  label="Delete"
  kind="danger"
  icon="heroicons/trash"
  confirm-title="Delete item"
  confirm-message="Are you sure? This cannot be undone."
  confirm-label="Yes, delete"
  confirm-kind="danger"
  @confirm="removeItem(id)"
></cnc-confirm-button>

Usage guidance

Confirm destructive and irreversible actions — deleting, publishing, resetting. Do not confirm things the reader can simply undo: a prompt on every action trains people to dismiss prompts, which is exactly the habit that makes the one that matters useless.

Prefer this to a modal for an action anchored to one row or one button — the popup appears against the thing it is about, and dismissing it costs a click anywhere. Reach for cnc-dialog instead when the decision needs more than a sentence, or when it must block the rest of the page.

← Back to Widgets