Confirm button
A destructive action in two presses: the first arms it and says what will happen, the second runs it.
Web uniquement — React, depuis @krizaka/ui/confirm-button. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- 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.
Quand ne pas l’utiliser
Installation
Installer
npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ConfirmButton } from "@krizaka/ui/confirm-button";Exemples
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 | Défaut | Description |
|---|---|---|---|
confirmLabelrequis | string | — | What the second press does, in words — shown and announced once armed ("Delete for good?"). Passed translated. |
onConfirmrequis | () => 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. |
Accessibilité
- Once armed,
confirmLabelnames the button and is announced politely. - An icon-only confirm button needs
labelwhile idle. - The armed state is
data-armed: style it with the danger tint, the words stay a text role.
Clavier
| Touches | Action |
|---|---|
| Enter / Space | Arms, then confirms. |
| Esc | Disarms; so does moving the focus away. |
Bonnes pratiques
confirmLabelsays the consequence as a question: “Delete for good?”.- Keep
timeoutMsshort (4 s by default): an armed button left on screen is a trap. - Never use
window.confirmfor this.
Composants liés
Générée depuis le code de @krizaka/ui 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub