Confirm button

Two-step inline confirmation that turns a default button into a danger button after the first click.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`label`	`label`	Idle button text when the default slot is empty	`string`	`string`	`""`
`confirmLabel`	`confirm-label`	Button text in confirm state when the `confirm-label` slot is empty	`string`	`string`	`""`
`confirmInfo`	`confirm-info`	Optional helper text above the button in confirm state	`string`	`string`	`""`
`size`	`size`	`s` \| `m` \| `l`	`DuoButtonSize`	`"s" \| "m" \| "l"`	`"m"`
`square`	`square`	Icon-only while idle; confirm state always shows `confirm-label` (color-only change is not enough)	`boolean`	`boolean`	`false`
`disabled`	`disabled`	Disables the control and exits confirm state	`boolean`	`boolean`	`false`
`confirming`	`confirming`	Whether the control is in confirm state	`boolean`	`boolean`	`false`
`accessibleLabel`	`aria-label`	Accessible name when the control is icon-only	`string \| undefined`	`string \| undefined`	`—`

Slots

Name	Description
`default`	Idle button label (used when `label` is empty; omit for icon-only)
`confirm-label`	Confirm-state label (used when `confirm-label` is empty)
`icon`	Leading icon (e.g. `<duo-icon>`). Pair with `square` and `aria-label` for icon-only.

Usage

Confirm button is a default duo-button that arms on the first click (danger variant + confirm label) and confirms on the second. Optional confirm-info appears above the button while armed. Escape, an outside click, or focus leaving the control cancels without running the action.

Do

Use a specific confirm label such as “Click again to delete”, not “Are you sure?” — as confirm-label or the confirm-label slot.
Listen for confirm — never treat the first click as the action.
Use confirm-info for a short consequence (“This cannot be undone.”).
Prefer this in dense lists or settings where a modal would interrupt.
Put a duo-icon in the icon slot for icon + text, or set square with aria-label for an icon-only idle state. Confirm state always shows confirm-label — a color change alone is not enough.

Don’t

Don’t use it for high-risk legal or financial actions — use duo-modal.
Don’t add a timeout to leave confirm state; Escape and leaving the control are the cancel paths.
Don’t ship an icon-only control without aria-label (or label).

Events

Event	When
`confirmstart`	First activation; confirm state entered
`confirm`	Second activation; user confirmed
`confirmcancel`	Confirm state left without confirming

Slots

Slot	Purpose
`default`	Idle label (preferred over the `label` attribute when present)
`confirm-label`	Confirm-state label (preferred over the `confirm-label` attribute when present)
`icon`	Leading icon (`duo-icon`); use with visible text or `square`