Lucent UI
← DashboardHeaderConfirmationDialogProductCard →
✦ LLM-ready

ConfirmationDialog

pattern

Confirmation dialog with title, description, and confirm/cancel actions. Includes a typed confirmation variant that requires the user to type a value before confirming, and a non-destructive variant. Composes Card, Stack, Row, Text, Input, Button, and Icon.

"Build a ConfirmationDialog pattern from lucent-ui with Card, destructive title, warning description, and Cancel/Delete buttons. Include a typed confirmation variant with Input."

Usage

React / JSX
import { Card, Stack, Row, Text, Input, Button } from 'lucent-ui'

<ConfirmationDialog />

Installation

pnpm add lucent-ui

API Reference

ConfirmationDialog props — * required

PropTypeDefaultDescription
Cardcomponent—Elevated surface container for the dialog.
Textcomponent—Dialog title and description.
Inputcomponent—Typed confirmation field for destructive actions.
Buttoncomponent—Cancel and confirm action buttons.
Stackcomponent—Vertical layout for dialog content.
Rowcomponent—Horizontal layout for button row.