Confirm button

A destructive action in two presses: the first arms it and says what will happen, the second runs it.

WebBetaActions

Web only — React, from @krizaka/ui/confirm-button. Beta: its API may still change in a minor version.

Why it is here. Used by Orochia.

When to use

For a destructive action on one item, in place: delete a comment, remove a member, leave a group.
When a dialog would be too heavy and an undo is not possible.

When not to use

When the consequences need explaining, or several things are affected.Use instead: Dialog
For an action that is not destructive.Use instead: Button
When the action can be undone: run it at once and offer “Undo” in a toast.Use instead: Toast

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { ConfirmButton } from "@krizaka/ui/confirm-button";

Examples

Icon, idle

An icon named by label.

Armed

After the first press: the danger border and tint, the words legible.

With words

Once armed, armedContent replaces the words.

Props

A two-step button: press to arm, press again within timeoutMs to confirm. State: data-armed.

Prop	Type	Default	Description
`confirmLabel`required	`string`	—	What the second press does, in words — shown and announced once armed ("Delete for good?"). Passed translated.
`onConfirm`required	`() => void`	—	Runs on the second press.
`announce`	`string`	—	A message announced politely by assistive technology when it changes (“Saved”, “Upload failed”) — passed translated.
`armedContent`	`ReactNode`	—	What it shows once armed (default: its children, then `confirmLabel`).
`indicator`	`boolean`	`true`	Shows the glyph while `loading` / with a `status`. `false`: you draw your own.
`label`	`string`	—	The accessible name while idle, for an icon-only button (the confirm label names it once armed).
`loading`	`boolean`	—	Disables and signals the wait (aria-busy, data-loading) and shows the Krizaka loader glyph before the label; the button keeps its colour.
`magnetic`	`boolean`	—	The button leans a few pixels toward a fine pointer (driven by `MotionObserver`; never under reduced motion or on touch).
`onArmedChange`	`((armed: boolean) => void)`	—	Notified when it arms and disarms.
`progress`	`number \| null`	—	Between 0 and 1, while `loading`: the glyph's trace and a light fill across the button grow to the value (an upload, an export).
`shape`	`"rounded" \| "pill" \| "cut"`	`rounded`	rounded · pill · cut (45° corners, the Krizaka chamfer).
`shimmer`	`boolean`	—	A sheen of light crosses the button on hover — for the one action a page is about.
`size`	`"icon" \| "sm" \| "md" \| "lg"`	`md`	sm · md · lg, or `icon` (a square).
`status`	`"success" \| "error" \| null`	—	How the action ended: `success` draws a check, `error` a cross (and the button shakes its head once); a ring of the status colour opens around it. Clear it to return to rest.
`timeoutMs`	`number`	`4000`	Disarms after this many milliseconds (4000 by default).
`variant`	`"danger" \| "primary" \| "gradient" \| "secondary" \| "outline" \| "ghost"`	`ghost`	The look: `primary` (the accent), `gradient` (accent → accent-2), `secondary` (a raised surface), `outline`, `ghost`, `danger`.

Accessibility

Once armed, confirmLabel names the button and is announced politely.
An icon-only confirm button needs label while idle.
The armed state is data-armed: style it with the danger tint, the words stay a text role.

Keyboard

Keys	Action
`Enter / Space`	Arms, then confirms.
`Esc`	Disarms; so does moving the focus away.

Best practices

confirmLabel says the consequence as a question: “Delete for good?”.
Keep timeoutMs short (4 s by default): an armed button left on screen is a trap.
Never use window.confirm for this.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub