Alert Dialog

A Base UI alert dialog component

Loading...

Installation

npx shadcn@latest add @craftdotui/baseui-alert-dialog

Anatomy

Composite

<AlertDialogRoot>
    <AlertDialogTrigger>Open Alert Dialog</AlertDialogTrigger>

    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Alert Title</AlertDialogTitle>
            <AlertDialogDescription>Alert Description</AlertDialogDescription>
        </AlertDialogHeader>

        <AlertDialogFooter>
            <AlertDialogClose>Cancel</AlertDialogClose>
            <AlertDialogClose>Confirm</AlertDialogClose>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialogRoot>

Primitives

<AlertDialogRoot>
    <AlertDialogTrigger>Open Alert Dialog</AlertDialogTrigger>

    <AlertDialogPortal>
        <AlertDialogBackdrop />
        <AlertDialogViewport>
            <AlertDialogPopup>
                <AlertDialogHeader>
                    <AlertDialogTitle>Alert Title</AlertDialogTitle>
                    <AlertDialogDescription>Alert Description</AlertDialogDescription>
                </AlertDialogHeader>

                <AlertDialogFooter>
                    <AlertDialogClose>Cancel</AlertDialogClose>
                    <AlertDialogClose>Confirm</AlertDialogClose>
                </AlertDialogFooter>
            </AlertDialogPopup>
        </AlertDialogViewport>
    </AlertDialogPortal>
</AlertDialogRoot>

Demo

Controlled

Loading...

Detached Triggers

Loading...

Multiple Triggers

Loading...

Close Confirmation

Loading...

Open from Menu

Loading...