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.

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@beta @krizaka/tailwind@beta @krizaka/tokens@beta 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.

"use client";

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

export default function ConfirmButtonIdle() {
  return (
    <ConfirmButton label="Delete the comment" confirmLabel="Delete?" size="sm" onConfirm={() => {}}>
      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
      </svg>
    </ConfirmButton>
  );
}

Armed

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

"use client";

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

// Press once: it arms and says what will happen (`confirmLabel`); press again within `timeoutMs` to confirm.
export default function ConfirmButtonArmed() {
  return (
    <ConfirmButton label="Delete the comment" confirmLabel="Delete?" size="sm" timeoutMs={600_000} onConfirm={() => {}}>
      <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
        <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6" />
      </svg>
    </ConfirmButton>
  );
}

With words

Once armed, armedContent replaces the words.

"use client";

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

// With words: once armed, `armedContent` replaces them.
export default function ConfirmButtonWithText() {
  return (
    <ConfirmButton variant="outline" confirmLabel="Leave for good?" armedContent="Leave for good?" onConfirm={() => {}}>
      Leave the group
    </ConfirmButton>
  );
}

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.
`armedContent`	`ReactNode`	—	What it shows once armed (default: its children, then `confirmLabel`).
`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) — the product adds a spinner if it wants one.
`onArmedChange`	`((armed: boolean) => void)`	—	Notified when it arms and disarms.
`shape`	`"rounded" \| "pill"`	`rounded`	rounded · pill.
`size`	`"icon" \| "sm" \| "md" \| "lg"`	`md`	sm · md · lg, or `icon` (a square).
`timeoutMs`	`number`	`4000`	Disarms after this many milliseconds (4000 by default).
`variant`	`"danger" \| "primary" \| "secondary" \| "outline" \| "ghost"`	`ghost`	The look: `primary` (the accent), `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 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Confirm button

When to use

When not to use

Installation

Examples

Icon, idle

Armed

With words

Props

Accessibility

Keyboard

Best practices

On this page

Confirm button

When to use

When not to use

Installation

Examples

Icon, idle

Armed

With words

Props

Accessibility

Keyboard

Best practices

Related components

On this page