Confirm Dialog

Action confirmation. Free, MIT · Overlays and notifications › Dialogs and panels

Installation

npx valyro-cli@latest add confirm-dialog

npx shadcn@latest add https://valyro.xyz/r/confirm-dialog.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { ConfirmDialog } from 'valyro-ui';

Props

Prop	Type	Default
`title` *	`ReactNode`		The question being confirmed, e.g. "Delete project?"; becomes the dialog's accessible name.
`confirmLabel`	`ReactNode`	`'Confirm'`	Text of the confirm button; name the action, e.g. "Delete".
`cancelLabel`	`ReactNode`	`'Cancel'`	Text of the cancel button.
`variant`	`'default' \| 'danger'`	`'default'`	`danger` makes the confirm button red, for destructive actions.
`onConfirm` *	`() => unknown`		May return a promise: the dialog shows a spinner and stays open until it settles; a rejection is shown as an error.
`onCancel`	`() => void`		Called when the dialog closes without confirming.
`confirmText`	`string`		The user must type this exact text (e.g. a project name) before confirming.
`confirmTextLabel`	`ReactNode`		Prompt above the type-to-confirm field; defaults to "To confirm, type {confirmText} below".
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`description`	`ReactNode`		Supporting text; becomes the dialog's accessible description.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`confirmText ? 'md' : 'sm'`	On phones (≤ 480px) every size becomes a bottom sheet, except small Glass dialogs, which stay iOS alerts.
`children`	`ReactNode`		Body content; it scrolls between the header and the footer when it overflows. In the compound form, a `Dialog.Trigger` and a `Dialog.Content` (with `Dialog.Header`, `.Title`, `.Description`, `.Body`, `.Footer`, `.Close`).
`closeOnOverlayClick`	`boolean`
`closeOnEscape`	`boolean`
`initialFocusRef`	`RefObject<HTMLElement \| null>`
`returnFocusRef`	`RefObject<HTMLElement \| null>`		Where focus goes on close when the element that opened the modal is no longer on the page (a deleted row's menu). Without it, focus moves to the first Tab stop near where that element was.
`layerClassName`	`string`		Class for the full-screen layer (positioning wrapper).
`animation`	`'default' \| 'spring'`		`spring`: the panel springs in (centred panels drop in from `from` with a slight tilt, edge panels slide in critically damped). `default`: the theme's own enter and exit.
`from`	`'top' \| 'bottom' \| 'left' \| 'right'`		Side a centred panel springs in from with `animation="spring"` (default `top`).

Related components

Dialog — Modal dialogs
Drawer — Slide-out panels
Bottom Sheet — iOS-style bottom sheet: snap points, swipe, peek mode
Alert — Inline alerts
Toast — Pop-up notifications
Notification Center — Notification inbox
Loading Overlay — Loading screen
Popover — Floating content
Hover Card — Card on hover
Tour — Onboarding tour: element spotlight, steps, progress and resume

Previous: Dialog · Next: Drawer · All Overlays and notifications