Dialog

A modal dialog component built on Radix UI primitives for displaying content that requires user attention.

Import

Code
 
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "zudoku/ui/Dialog";

Components

The Dialog component consists of several sub-components:

• Dialog - The main container (root)
• DialogTrigger - Button that opens the dialog
• DialogContent - The modal content container
• DialogHeader - Header section for title and description
• DialogTitle - The dialog title
• DialogDescription - Additional description text
• DialogFooter - Footer section for actions
• DialogClose - Element that closes the dialog when clicked

Basic Usage

Code
 
<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Open Dialog</Button>
  </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>
  </DialogContent>
</Dialog>

With Footer Actions

Code
 
<Dialog>
  <DialogTrigger asChild>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription>
        Make changes to your profile here. Click save when you're done.
      </DialogDescription>
    </DialogHeader>
    <div className="grid gap-4 py-4">
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="name" className="text-right">
          Name
        </Label>
        <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
      </div>
      <div className="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="username" className="text-right">
          Username
        </Label>
        <Input id="username" defaultValue="@peduarte" className="col-span-3" />
      </div>
    </div>
    <DialogFooter>
      <Button type="submit">Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Props

DialogContent

Code
 
interface DialogContentProps
  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
  showCloseButton?: boolean; // Default: true
}

Features

• Keyboard Navigation: ESC key closes the dialog
• Focus Management: Focus is trapped within the dialog
• Accessibility: Proper ARIA attributes and screen reader support
• Backdrop Click: Clicking outside closes the dialog
• Animation: Smooth enter/exit animations