ConfirmDialog
Confirm an action in a modal dialog.
A ready-made Dialog with a title, description, and confirm and cancel buttons. It needs a unique id and a PBCProvider (or DialogProvider) higher in the tree. trigger takes the trigger button props, same as Button; without it, open the dialog via open and onOpenChange. onConfirm runs on confirmation, then the dialog closes.
Live example
Example controls
Usage
import { ConfirmDialog } from '@prosazhin/pbcomponents';
<ConfirmDialog
id='delete-project'
title='Delete the project?'
description='All files will be removed permanently.'
color='danger'
confirmText='Delete'
cancelText='Cancel'
onConfirm={() => deleteProject()}
trigger={{ color: 'danger', theme: 'border', children: 'Delete project' }}
/>;Component API
| Prop | Type / variants | Purpose | Default |
|---|---|---|---|
id | string | Unique dialog identifier. | — |
title | ReactNode | Confirmation question or heading. | — |
description | ReactNode | Explanation below the heading. | — |
color | 'primary' | 'danger'primary · danger | Confirm button color. | primary |
confirmText | string | Confirm button text. | Confirm |
cancelText | string | Cancel button text. | Cancel |
onConfirm | () => void | Called on confirm; the popup closes afterwards. | — |
onCancel | () => void | Called on cancel. | — |
open | boolean | Controlled open state. | — |
defaultOpen | boolean | Initial open state when uncontrolled. | false |
onOpenChange | (open: boolean) => void | Called when the popup opens or closes. | — |
trigger | DialogTriggerProps | Trigger button props (same as Button); without it, open the dialog via open. | — |
className | string | Class of the root element. | — |
Native HTML attributes are accepted where the component renders the corresponding element. className props only affect styling.