Saasflare UI
Components

Alert Dialog

Modal confirmation for destructive or irreversible actions, with required acknowledge and cancel actions.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/alert-dialog.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import {    AlertDialog,    AlertDialogAction,    AlertDialogCancel,    AlertDialogContent,    AlertDialogDescription,    AlertDialogFooter,    AlertDialogHeader,    AlertDialogTitle,    AlertDialogTrigger,    Button,} from "@saasflare/ui"/** A destructive confirmation dialog with cancel and confirm actions. */export function Demo() {    return (        <AlertDialog>            <AlertDialogTrigger asChild>                <Button variant="outline" intent="danger">                    Delete workspace                </Button>            </AlertDialogTrigger>            <AlertDialogContent>                <AlertDialogHeader>                    <AlertDialogTitle>Delete this workspace?</AlertDialogTitle>                    <AlertDialogDescription>                        This permanently removes the workspace, its members, and all projects. This                        action cannot be undone.                    </AlertDialogDescription>                </AlertDialogHeader>                <AlertDialogFooter>                    <AlertDialogCancel>Cancel</AlertDialogCancel>                    <AlertDialogAction>Delete workspace</AlertDialogAction>                </AlertDialogFooter>            </AlertDialogContent>        </AlertDialog>    )}

API Reference

AlertDialogAction

Prop

Type

AlertDialogCancel

Prop

Type

AlertDialogContent

Prop

Type

AlertDialogDescription

Prop

Type

AlertDialogOverlay

Prop

Type

AlertDialogTitle

Prop

Type

AlertDialogTrigger

Prop

Type

On this page