Dialog

Focused tasks and confirmations. Dialog is a raised surface with 32px padding and the round DialogClose; AlertDialog asks before something important, with a tone icon.

Figma: 10 / Components / Dialog

Usage

Source: src/components/ui/dialog.tsx, src/components/ui/alert-dialog.tsx

import {
    Dialog,
    DialogCloseButton,
    DialogContent,
    DialogDescription,
    DialogFooter,
    DialogHeader,
    DialogTitle,
    DialogTrigger
} from '@/components/ui/dialog'

<Dialog>
    <DialogTrigger render={<Button />}>Create Grow Page</DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Create Grow Page</DialogTitle>
            <DialogCloseButton />
        </DialogHeader>
        {/* fields */}
        <DialogFooter>
            <Button size='lg'>Create page</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Examples

AlertDialog

destructive for deleting, warning for permanent edits, info for confirmations and neutral (no icon) for discarding changes.

When to use

When to reach for it, and when to use something else.

Use it for

Short tasks that need full attention, such as creating a page.

Confirming destructive or permanent actions.

Avoid

Long forms or details; use a drawer.

Stacking dialogs on top of each other.

API reference

Dialog, AlertDialog

Prop	Type	Default	Description
open	boolean	–	Controlled open state.
onOpenChange	(open: boolean) => void	–	Called when it opens or closes.

AlertDialogHeader

Prop	Type	Default	Description
tone	'destructive' \| 'warning' \| 'info' \| 'neutral'	'neutral'	Adds the 48px tinted tone icon.

PreviousDatePicker NextDropdownMenu