Dialog

Accessible modal dialog component built with Radix UI

Installation

Install the dialog component using the shadcn CLI:

npx shadcn@latest add https://tezosx-ui.vercel.app/registry/tezosx/dialog.json

Examples

Basic

Simple dialog with trigger button

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Are you absolutely sure?</DialogTitle>
      <DialogDescription>
        This action cannot be undone.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button variant="destructive">Delete</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Controlled

Dialog with controlled open state

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open</Button>
<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Controlled Dialog</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button onClick={() => setOpen(false)}>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Form Dialog

Dialog containing a form

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      {/* Form fields */}
    </div>
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

API Reference

The Dialog component consists of multiple sub-components:

Dialog (Root)

Main component. Props: open, onOpenChange, defaultOpen, modal

DialogTrigger

Button that opens the dialog. Use asChild to use your own button

DialogContent

The dialog content container. Includes overlay and close button

DialogHeader

Container for title and description

DialogTitle

Dialog title (required for accessibility)

DialogDescription

Dialog description text

DialogFooter

Container for action buttons

DialogClose

Button that closes the dialog

Accessibility

• Built on Radix UI Dialog for full accessibility support
• Keyboard navigation: Escape to close, Tab to navigate, Enter to activate
• Focus management: Focus trapped inside dialog, returns to trigger on close
• Screen reader support with proper ARIA attributes
• Overlay prevents interaction with background content
• DialogTitle is required for accessibility
• Close button has proper aria-label for screen readers
• Supports both controlled and uncontrolled modes