Cena Research Institute | Cardiovascular Trial Site & CRO in Houston

Basic Usage

Dialogs are controlled components that require state management. They include a backdrop overlay and can be dismissed by clicking outside or pressing Escape.

Dialog

Variants

Dialogs can contain various content types and layouts.

Confirmation Dialog

Usage

"use client";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { useState } from "react";

export function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>Dialog description goes here.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  );
}

Props

Prop	Type	Default	Description
`open`	`boolean`	-	Whether the dialog is open
`onOpenChange`	`(open: boolean) => void`	-	Callback fired when open state changes

Material 3 Features

Elevation: Uses Material 3 elevation-lg for proper depth
Backdrop: Scrim overlay with blur effect
Animation: Smooth fade and zoom animations using motion tokens
Focus Management: Automatic focus trapping and restoration
Accessibility: Full keyboard navigation and ARIA support via Radix UI
Portal: Renders in a portal for proper z-index layering