Component

ConfirmDialog

Confirmation dialog for destructive or important actions.

tsx

import { ConfirmDialog } from 'wss3-forge'

Usage

•

Use for destructive actions like delete

•

Variant changes icon and button color

•

Shows loading state during async operations

•

Supports custom content via children

Examples

Danger Variant - Delete Confirmation

Delete this item?

This action cannot be undone. All data will be permanently removed.

tsx

1<ConfirmDialog
2  open={isOpen}
3  onClose={() => setIsOpen(false)}
4  onConfirm={handleDelete}
5  title="Delete this item?"
6  description="This action cannot be undone. All data will be permanently removed."
7  variant="danger"
8  confirmText="Delete"
9/>

Warning Variant - Unsaved Changes

Unsaved changes

You have unsaved changes. Are you sure you want to leave?

tsx

1<ConfirmDialog
2  open={isOpen}
3  onClose={() => setIsOpen(false)}
4  onConfirm={handleDiscard}
5  title="Unsaved changes"
6  description="You have unsaved changes. Are you sure you want to leave?"
7  variant="warning"
8  confirmText="Discard"
9/>

Introduction

Last updated: December 2025