Dialogs
ConfirmDialog
A world-class confirmation dialog for destructive or important actions in healthcare applications. Features proper focus management, semantic variants, and WCAG 2.1 accessibility compliance.
Danger Variant - Delete Patient Record
Use for irreversible destructive actions. Focus defaults to cancel button for safety.
Default Variant - Cancel Appointment
Use for important but non-destructive confirmations. Uses focusConfirm to focus the confirm button.
Warning Variant - Override Insurance
Use for actions that may have unintended consequences but are not destructive.
Success Variant - Approve Referral
Use for positive confirmations like approvals or completions.
Loading State
Show loading state during async operations like API calls. Buttons are disabled and close is prevented.
With Error Message
Display error messages when an operation fails. Error is highlighted and role='alert' is applied for screen readers.
Destructive Confirmation (Type to Confirm)
For highly destructive actions, require the user to type a confirmation phrase. Used for permanent deletions or critical changes.
Custom Content
Use children snippet for custom content beyond a simple message. Useful for showing additional details or structured information.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the dialog is open |
title | string | 'Confirm' | Dialog title |
message | string | 'Are you sure you want to proceed?' | Dialog message |
confirmText | string | 'Confirm' | Text for confirm button |
cancelText | string | 'Cancel' | Text for cancel button |
variant | 'default' | 'danger' | 'warning' | 'success' | 'default' | Visual variant |
loading | boolean | false | Show loading state during async operations |
error | string | — | Error message to display |
focusConfirm | boolean | false | Focus confirm button on open (default: cancel for destructive) |
showCloseButton | boolean | true | Show close button in header |
requireConfirmation | string | — | Text user must type to enable confirm button |
children | Snippet | — | Custom content instead of message |
icon | Snippet | — | Custom icon |
onconfirm | () => void | — | Confirm handler |
oncancel | () => void | — | Cancel handler |
Healthcare Best Practices
- • Always use
variant="danger"for actions that delete or permanently modify patient data - • Be specific in messages - explain exactly what will happen and any consequences
- • Use loading states to show progress during async operations (e.g., API calls)
- • Display error messages when operations fail, with guidance on how to resolve
- • Use descriptive button text (e.g., "Delete Record" instead of just "Confirm")
- • Focus management: for destructive actions, focus defaults to cancel button for safety
- • For critical deletions: use
requireConfirmationto require typing to confirm - • Semantic roles: danger/warning variants use
role="alertdialog"for screen reader announcement - • Keyboard accessibility: Escape key closes the dialog, Tab cycles through buttons
When to Use Each Variant
Danger
Permanent deletions, irreversible actions, data loss scenarios
Warning
Overrides, bypasses, actions with potential unintended consequences
Success
Approvals, completions, positive confirmations
Default
General confirmations, neutral actions, information acknowledgment