ConfirmDialog

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

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import {  Button,  ConfirmDialog,  Stack,  Text} from '@kerf-js/veneer'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.',        ].join('')}        action={paused.value ? 'Resume' : 'Pause deploys'}        onConfirm={confirm}      />    </>  )}const wait = (ms: number) =>  new Promise<void>((done) => {    setTimeout(done, ms)  })

Installation

npm install @kerf-js/veneer

Usage

tsx

import { ConfirmDialog } from '@kerf-js/veneer'

A destructive batch

Say what happens on the button, with the count.

tsx

import { state } from '@kerf-js/core'import { Button, ConfirmDialog } from '@kerf-js/veneer'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.',        ].join('')}        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