Component

Dialog

A modal dialog with Neo-Brutalism styling. Built on Radix UI Dialog primitive with full accessibility support.

Preview

Installation

pnpm dlx brutx@latest add dialog

Usage

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

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description text.
      </DialogDescription>
    </DialogHeader>
    <div>
      {/* Content */}
    </div>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Examples

Form Dialog

Dialog with form inputs for editing data.

Without Close Button

Use showCloseButton={false} to hide the default close button.

Controlled Dialog

Control the dialog state programmatically with open and onOpenChange.

Custom Close Button

Use DialogClose to create custom close buttons anywhere in the dialog.

API Reference

Dialog

The root component that manages dialog state.

Prop	Type	Default	Description
open	boolean	-	Controlled open state of the dialog
onOpenChange	(open: boolean) => void	-	Callback when open state changes
defaultOpen	boolean	false	Initial open state (uncontrolled)
modal	boolean	true	Whether to block interaction outside the dialog

DialogContent

The container for dialog content with animations and overlay.

Prop	Type	Default	Description
showCloseButton	boolean	true	Show the default close button in top-right corner
className	string	-	Additional CSS classes for the content container
onEscapeKeyDown	(event) => void	-	Handler called when Escape key is pressed

All Exports

Component	Description
Dialog	Root component managing state
DialogTrigger	Button that opens the dialog
DialogContent	Main content container with overlay
DialogHeader	Header section with bottom border
DialogFooter	Footer section with top border
DialogTitle	Accessible title element
DialogDescription	Accessible description element
DialogClose	Primitive for custom close buttons
DialogPortal	Portals content to document body
DialogOverlay	Background overlay component

Accessibility

Focus is trapped within the dialog when open
Escape key closes the dialog
Clicking outside closes the dialog (when modal)
Screen reader announcements for dialog content
Returns focus to trigger element on close
Uses role="dialog" and aria-modal