Skip to content

ConfirmDialog

Asks before something that cannot be undone. Says what will happen; can ask the person to type a name.

OverlaysIsland

Examples

Type to confirm

The confirm button stays disabled until the input matches. Native pattern validation, no JavaScript.

Delete GitHub?

Agents lose its 38 tools at once. Its tokens and call history are deleted.

Example
<DialogTrigger target="delete-server" variant="danger" icon="trash">
  Delete server
</DialogTrigger>
<ConfirmDialog
  id="delete-server"
  title="Delete GitHub?"
  confirmLabel="Delete server"
  confirmText="github"
>
  <Text>Agents lose its 38 tools at once. Its tokens and call history are deleted.</Text>
</ConfirmDialog>

Plain confirm

Without confirmText, Cancel gets focus. Use tone="primary" when the action is not destructive.

Pause routing to Linear?

Agents get an error for its tools until you resume.

Example
<DialogTrigger target="pause-routing" variant="secondary">Pause routing</DialogTrigger>
<ConfirmDialog
  id="pause-routing"
  tone="primary"
  title="Pause routing to Linear?"
  description="Agents get an error for its tools until you resume."
  confirmLabel="Pause routing"
/>

Usage

Usage
import { ConfirmDialog, DialogTrigger } from '@switchboard/ui'

<ConfirmDialog
  id="delete-server"
  title={`Delete ${server.name}?`}
  confirmLabel="Delete server"
  confirmText={server.slug}
  action={routes.servers.destroy.href({ id: server.id })}
>
  …
</ConfirmDialog>

Props

Every component also takes mix, for css() and mixins applied after its own style.

ConfirmDialog

ConfirmDialog props
PropTypeDefaultDescription
id*string–Unique on the page; the DialogTrigger target.
title*RemixNode–The question: "Delete GitHub?"
confirmLabel*string–Verb and object for the confirm button: "Delete server".
cancelLabelstring'Cancel'Label of the cancel button.
confirmTextstring–Text the person must type exactly to enable the confirm button.
confirmNamestring'confirm'Name of the typed input, posted with the form.
tone'danger' | 'primary''danger'Confirm button variant.

Also takes Dialog props (id, description, size, action, method, open, closeHref). Size defaults to sm.

Accessibility

  • Has role="alertdialog". Backdrop clicks do not close it; Escape and Cancel do.
  • Focus starts in the confirm input when there is one, otherwise on Cancel, never on the destructive button.
  • The input label reads "Type github to confirm"; a mismatch is a native validation error.

Guidance

Do

  • Say exactly what is lost in the body: tools, tokens, history.
  • Use confirmText for deletes that affect agents in use.

Don’t

  • Ask "Are you sure?" or label the buttons Yes and No.
  • Confirm actions that are easy to undo; just do them and offer Undo in a toast.