Dialog | Bearnie

<Dialog>
<DialogTrigger>
  <Button>Open Dialog</Button>
</DialogTrigger>
<DialogOverlay />
<DialogContent>
  <DialogHeader>
    <DialogTitle>Dialog Title</DialogTitle>
    <DialogDescription>This is a dialog description.</DialogDescription>
  </DialogHeader>
  <DialogFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Continue</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

Installation

npx bearnie add dialog

import Dialog from "@/components/ui/dialog/Dialog.astro";
import DialogTrigger from "@/components/ui/dialog/DialogTrigger.astro";
import DialogOverlay from "@/components/ui/dialog/DialogOverlay.astro";
import DialogContent from "@/components/ui/dialog/DialogContent.astro";
import DialogHeader from "@/components/ui/dialog/DialogHeader.astro";
import DialogTitle from "@/components/ui/dialog/DialogTitle.astro";
import DialogDescription from "@/components/ui/dialog/DialogDescription.astro";
import DialogFooter from "@/components/ui/dialog/DialogFooter.astro";

Usage

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

<Dialog>
<DialogTrigger>
  <Button>Open</Button>
</DialogTrigger>
<DialogOverlay />
<DialogContent>
  <DialogHeader>
    <DialogTitle>Title</DialogTitle>
    <DialogDescription>Description</DialogDescription>
  </DialogHeader>
</DialogContent>
</Dialog>

Examples

With form

<Dialog>
<DialogTrigger>
  <Button variant="outline">Edit Profile</Button>
</DialogTrigger>
<DialogOverlay />
<DialogContent>
  <DialogHeader>
    <DialogTitle>Edit profile</DialogTitle>
    <DialogDescription>Make changes to your profile here.</DialogDescription>
  </DialogHeader>
  <div class="grid gap-4 py-4">
    <div class="grid gap-2">
      <Label for="name">Name</Label>
      <Input id="name" value="Michael Andreuzza" />
    </div>
    <div class="grid gap-2">
      <Label for="username">Username</Label>
      <Input id="username" value="@Mike_andreuzza" />
    </div>
  </div>
  <DialogFooter>
    <Button>Save changes</Button>
  </DialogFooter>
</DialogContent>
</Dialog>

Anatomy

Dialog - The root container that manages state
DialogTrigger - The element that opens the dialog
DialogOverlay - The backdrop behind the dialog
DialogContent - The dialog panel with close button
DialogHeader - Container for title and description
DialogTitle - The dialog heading
DialogDescription - Secondary descriptive text
DialogFooter - Container for action buttons

Props

All Dialog components accept class for additional CSS classes. They are structural components without specific props.