The destructive-confirmation modal: a sentence naming what will be deleted, an optional consequence note and error banner, and a confirm button that blocks cancelling while the request is in flight.
DefaultDeletingError
<ConfirmDialog open={confirming} name={project.name} loading={deleting} note="Every deployment and invoice in this project is removed with it." onconfirm={remove} oncancel={() => (confirming = false)} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { ConfirmDialog } from '@chanrg/4ui';<ConfirmDialog open={confirming} name={project.name} loading={deleting} note="Every deployment and invoice in this project is removed with it." onconfirm={remove} oncancel={() => (confirming = false)} />Deleting
While loading, both actions disable and Escape can no longer cancel the request.
Both actions disable while the request is in flight; this one settles after a moment
<ConfirmDialog open name="checkout-service" loading onconfirm={remove} oncancel={close} />With error
Pass error to surface a failed attempt without closing the dialog.
A failed attempt reports back without closing the dialog
<ConfirmDialog open name="checkout-service" error="Service is referenced by 2 dashboards." onconfirm={remove} oncancel={close}/>API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Visibility. |
name / prefix / suffix | string | — / 'Delete ' / '?' | The sentence: prefix, bolded name, suffix. |
note / error | string | — | Consequence line and an alert banner. |
loading | boolean | false | Disables both actions and swaps in the loading label. |
onconfirm / oncancel | () => void | — | Cancel also fires on Escape and backdrop click. |
children | Snippet | — | Replaces the generated sentence. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Built on Modal, so focus is trapped and restored to the trigger on close.
- The error banner is a live alert.
- Escape cannot cancel a request already in flight.