ConfirmDialog

Asks people to confirm one action, with the focus on Cancel.

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Button, ConfirmDialog, Stack, Text } from '@weft-js/warp'export function Pause() {  const open = state(false)  const paused = state(false)  const confirm = async () => {    await wait(700)    paused.value = !paused.value  }  return (    <>      <Stack gap="related" align="center">        <Text subtle>checkout is {paused.value ? 'paused' : 'live'}.</Text>        <Button emphasis="outline" tone="neutral" onClick={() => (open.value = true)}>{paused.value ? 'Resume deploys' : 'Pause deploys'}</Button>      </Stack>      <ConfirmDialog open={open} title={paused.value ? 'Resume deploys?' : 'Pause deploys?'} description="This applies to everyone on checkout." action={paused.value ? 'Resume' : 'Pause deploys'} onConfirm={confirm} />    </>  )}const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

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

A destructive batch

Say what happens on the button, with the count.

tsx

import { state } from '@weft-js/core'import { Button, ConfirmDialog } from '@weft-js/warp'export function Revoke() {  const open = state(false)  return (    <>      <Button emphasis="soft" tone="critical" onClick={() => (open.value = true)}>Remove 2 members</Button>      <ConfirmDialog open={open} tone="critical" title="Remove 2 members?" description="Priya and Tomás lose access right away." action="Remove 2 members" onConfirm={() => wait(600)} />    </>  )}const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

When to use

Use it for

The action affects other people or is awkward to reverse

Reach for something else

TypeToConfirm, when it cannot be undone

Accessibility

Esc: Cancels and returns focus
Enter: Presses the focused button

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.
`action`	`unknown`	—	The confirm button's words.
`cancel`	`string`	`'Cancel'`	The cancel button's words.
`tone`	`Tone`	—	`critical` for anything destructive.
`glyph`	`string \| IconComponent`	—	An icon at the top of the dialog.
`children`	`unknown`	—	What it contains.

Event	Type	Default	Description
`onConfirm`	`() => void \| Promise<void>`	—	Do the work here. A thrown error keeps the dialog and offers Retry.
`onCancel`	`(() => void)`	—	Called on Cancel.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="confirm-dialog"] [data-part="mark"]

mark