Dialog

A modal dialog for confirmations, forms, and alerts.

$ npx @beaket/ui add dialog

Source

import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";

export default function DefaultDialogExample() {
  return (
    <div className="flex h-full w-full items-center justify-center">
      <Dialog trigger={<Button>Open Dialog</Button>}>
        <Dialog.Header>
          <Dialog.Title>Dialog Title</Dialog.Title>
          <Dialog.Description>
            This is a dialog description that provides additional context.
          </Dialog.Description>
        </Dialog.Header>
        <p className="text-fg text-sm">Dialog content goes here. You can put any content inside.</p>
        <Dialog.Footer>
          <Dialog.Close>
            <Button variant="outline">Cancel</Button>
          </Dialog.Close>
          <Button>Confirm</Button>
        </Dialog.Footer>
      </Dialog>
    </div>
  );
}

Examples

All States

Source

import { Button } from "@/components/ui/button";
import { Dialog } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

export default function AllDialogStatesExample() {
  return (
    <div className="flex flex-wrap gap-4">
      <Dialog trigger={<Button>Default</Button>}>
        <Dialog.Header>
          <Dialog.Title>Default Dialog</Dialog.Title>
          <Dialog.Description>A standard dialog with title and description.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close>
            <Button variant="outline">Close</Button>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog>
      <Dialog trigger={<Button variant="outline">With Form</Button>}>
        <Dialog.Header>
          <Dialog.Title>Form Dialog</Dialog.Title>
          <Dialog.Description>Dialog containing a form.</Dialog.Description>
        </Dialog.Header>
        <div className="py-4">
          <Input placeholder="Enter something..." />
        </div>
        <Dialog.Footer>
          <Dialog.Close>
            <Button variant="outline">Cancel</Button>
          </Dialog.Close>
          <Button>Submit</Button>
        </Dialog.Footer>
      </Dialog>
      <Dialog preventClose trigger={<Button variant="outline">Prevent Close</Button>}>
        <Dialog.Header>
          <Dialog.Title>Cannot Dismiss</Dialog.Title>
          <Dialog.Description>Must use buttons to close.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close>
            <Button>Got it</Button>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog>
      <Dialog trigger={<Button variant="destructive">Destructive</Button>}>
        <Dialog.Header>
          <Dialog.Title>Confirm Deletion</Dialog.Title>
          <Dialog.Description>This action is irreversible.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close>
            <Button variant="outline">Cancel</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button variant="destructive">Delete</Button>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog>
      <Dialog
        hideCloseButton
        preventClose
        trigger={<Button variant="secondary">No X Button</Button>}
      >
        <Dialog.Header>
          <Dialog.Title>Action Required</Dialog.Title>
          <Dialog.Description>No X button, must use actions.</Dialog.Description>
        </Dialog.Header>
        <Dialog.Footer>
          <Dialog.Close>
            <Button>Acknowledge</Button>
          </Dialog.Close>
        </Dialog.Footer>
      </Dialog>
    </div>
  );
}

Props

Name	Type	Default	Description
size	undefined \| sm \| md \| lg \| xl \| full	md	Content width preset; className can override it. Defaults to md.
closeLabel	string \| undefined	Close dialog	Accessible name of the built-in close button.
preventClose	boolean \| undefined	false	When true, prevents closing the dialog via ESC key or clicking outside. Users must use the close button or action buttons to dismiss the dialog.
hideCloseButton	boolean \| undefined	false	When true, hides the X close button in the top-right corner. Useful with preventClose when you want users to use only action buttons.
trigger	ReactNode	—	Element that opens the dialog when clicked. Can be any clickable element like Button, link, or custom trigger. Optional - if not provided, dialog must be controlled via open/onOpenChange props.
children	ReactNode	—	Dialog content including Header, Description, Footer, and custom elements
open	boolean \| undefined	—	Controlled open state of the dialog. When provided, you must also provide onOpenChange to handle state updates.
onOpenChange	((open: boolean) => void) \| undefined	—	Callback when the open state changes. Required when using controlled mode (open prop).