Type-to-confirm for destructive actions: a short warning, the exact name to type with a copy button beside it, and a field that shows letter by letter how close the typing is, tinting every matching character and underlining the first one that departs. The button only arms on an exact match; pressing it or Enter before that shakes the field instead. The action may return a promise, which shows a spinner and then draws a check. Case-sensitive or not, destructive or default tone, three sizes, controlled or uncontrolled text.
The import and the props worth knowing about, in one place.
import { ConfirmType } from "@/components/beste/component/confirm-type";
<ConfirmType
name="Blue Lines"
warning="Deleting the album removes its tracks and artwork. This cannot be undone."
confirmLabel="Delete this album"
doneLabel="Album deleted"
onConfirm={async () => {
await fetch("/api/albums/blue-lines", { method: "DELETE" });
}}
/>
<ConfirmType
name="autumn-tour"
caseSensitive={false} // letter case does not matter
tone="default"
size="sm"
/>Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.
| Type | Matching letters tint; the first letter that departs from the name is underlined. |
|---|---|
| Enter | Confirms on an exact match, and shakes the field otherwise. |
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
name* | string | — | The exact text the reader has to type, usually the name of what is about to go. |
warning | React.ReactNode | — | A short warning above the field. |
onConfirm | () => void | Promise<unknown> | — | Runs on an exact match. Return a promise to show a loading state until it settles. |
confirmLabel | string | — | Button label. |
doneLabel | string | — | Button label once the action has run. |
caseSensitive | boolean | — | Compare letter case too. @defaultValue true |
value | string | — | The typed text, controlled. |
defaultValue | string | — | |
onValueChange | (value: string) => void | — | |
disabled | boolean | — | |
tone | "default" | "destructive" | — | |
size | "sm" | "default" | "lg" | — | |
className | string | — |