TypeToConfirm
Makes people type a name before an action that cannot be undone.
SourcePackage @kerf-js/veneer
Preview
tsx
import { state } from '@kerf-js/core'import { Button, TypeToConfirm } from '@kerf-js/veneer'export function Delete() { const open = state(false) const gone = state(false) const confirm = async () => { await wait(700) gone.value = true } return ( <> {gone.value ? ( <Button emphasis="ghost" tone="neutral" onClick={() => (gone.value = false)} > reports deleted. Put it back </Button> ) : ( <Button tone="critical" onClick={() => (open.value = true)} > Delete reports </Button> )} <TypeToConfirm open={open} title="Delete reports?" description="This can't be undone." confirmText="reports" items={[ '41 deploys and their logs', '3 scheduled jobs', ]} action="Delete project" onConfirm={confirm} /> </> )}const wait = (ms: number) => new Promise<void>((done) => { setTimeout(done, ms) })Installation
npm install @kerf-js/veneerUsage
tsx
import { TypeToConfirm } from '@kerf-js/veneer'Accessibility
- Enter
- Confirms once the text matches
- Esc
- Cancels and returns focus
- Focus goes to the field, not to Cancel, because typing is the next step.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | State<boolean> | — | Whether it shows. You own this state. |
title | unknown | — | The heading. |
description | unknown | — | One supporting line under the title. |
confirmText | string | — | The exact text to type. |
items | string[] | — | What goes, listed. |
action | unknown | — | The confirm button's words. |
glyph | string | IconComponent | TrashIcon | The icon at the top. |
| Event | Type | Default | Description |
|---|---|---|---|
onConfirm | () => void | Promise<void> | — | Do the work here. A thrown error keeps the dialog and offers Retry. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="confirm"] [data-part="mark"]
mark
RelatedConfirm dialogDanger zone