Dialog

Stable

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Examples

Basic Usage

tsx
<Dialog>
  <DialogTrigger asChild>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit Profile</DialogTitle>
      <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
    </DialogHeader>
    <div className="py-4">
      <FormField label="Username"><Input defaultValue="@hacker" /></FormField>
    </div>
    <DialogFooter>
      <DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Neon Variant

tsx
<Dialog>
  <DialogTrigger asChild>
    <Button variant="neon">System Config</Button>
  </DialogTrigger>
  <DialogContent variant="neon">
    <DialogHeader>
      <DialogTitle className="font-mono text-cyan-400">SYS_CONFIG</DialogTitle>
      <DialogDescription>Override core firewall rules.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="neon">Execute</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Destructive Variant

tsx
<DialogContent variant="destructive">...</DialogContent>

API Reference

PropertyDescriptionTypeDefault
variantVisual style for DialogContent."default" | "neon" | "destructive"-