ConfirmDialog

Asks before an action that is hard to undo. It waits for an async action, shows the pending state and keeps the dialog open with an error if the action fails.

ConfirmDialog

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, ConfirmDialog

Dark theme, ConfirmDialog

High contrast theme, ConfirmDialog

UsageLink to the section Usage

tsx

import { ConfirmDialog } from '@skribly/ui/overlays'

tsx

<ConfirmDialog
  tone="danger"
  trigger={<Button variant="danger">Delete</Button>}
  title="Delete this draft?"
  confirmLabel="Delete draft"
  cancelLabel="Keep it"
  error={error}
  onConfirm={remove}
>
  This cannot be undone.
</ConfirmDialog>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

An alertdialog.
A destructive action starts focus on Cancel, any other on the action, so Enter does the safe thing.
The danger tone has a warning icon and says what happens in words.
An error is announced at once with role="alert".
Escape is ignored while the action runs.

This demo runs through axe in all three themes on every test run. See what the tests check.