TypeToConfirm

Makes people type a name before an action that cannot be undone.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, TypeToConfirm } from '@weft-js/warp'export function Delete() {  const open = state(false)  const gone = state(false)  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={async () => { await wait(700); gone.value = true }} />    </>  )}const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { TypeToConfirm } from '@weft-js/warp'

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 dialog Danger zone