Dialog

A modal window that overlays the page.

Open

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
Open
</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>
Cancel
</DialogClose>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Installation

pnpm dlx cubix@latest add dialog --base aria

Usage

Import

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

Example

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
Open
</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your
        account and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>
Cancel
</DialogClose>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

With form

Dialogs work well with form fields when you need a confirmation:

Edit profile

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
Edit profile
</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you are done.
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-4">
      <Input placeholder="Name" />
      <Input placeholder="Email" type="email" />
    </div>
    <DialogFooter>
      <DialogClose render={<Button type="submit" />}>
Save changes
</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

Without built-in close

Set showCloseButton= on DialogContent to hide the built-in X button and provide your own:

Open small modal

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>
Open small modal
</DialogTrigger>
  <DialogContent showCloseButton={false} className="max-w-sm">
    <DialogHeader>
      <DialogTitle>Look, just a small modal</DialogTitle>
      <DialogDescription>
        You can hide the built-in close button and add your own.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="ghost" />}>
Close
</DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

Note: The dialog is built on the native <dialog> element - Escape closes it, focus is trapped, and clicking the backdrop dismisses it. State is uncontrolled by default.

Dialog

The container that wraps the trigger and the content and manages open state.

Prop	Type	Default	Description
children	React.ReactNode	-	The trigger and content elements. State is managed internally (uncontrolled).

DialogTrigger / DialogClose

The elements that open and close the dialog. Use render to merge the behavior onto a Button.

Prop	Type	Default	Description
render	React.ReactElement	-	Render the trigger or close control as another element (e.g. a Button).
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

DialogContent

The content panel rendered as a native modal dialog with backdrop.

Prop	Type	Default	Description
showCloseButton	boolean	true	Show the built-in close (X) button in the top-right corner.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
...props	React.ComponentProps<'dialog'>	-	All native dialog attributes are forwarded to the rendered element.

DialogHeader / DialogFooter

Layout regions of the dialog content.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

DialogTitle / DialogDescription

The title and description text of the dialog.

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).