Dialog

Import

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
} from "@timelycare/helix-ui"

Props

interface DialogProps {
  open?: boolean
  onOpenChange?: (open: boolean) => void
  children: React.ReactNode
}

interface DialogContentProps {
  className?: string
  children: React.ReactNode
}

Design Tokens

Dialog Content

Dialog Header

Typography

Dialog Footer

Close Icon

Buttons

Breakpoints

Responsive Behavior

• On mobile (sm), buttons stack vertically with primary action first, header text centers
• On desktop (lg), buttons align horizontally in footer with cancel first, header left-aligned

Content Types

States

Close Icon States

Common Patterns

Form Dialog

<Dialog>
  <DialogTrigger asChild>
    <Button>Edit Profile</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog title</DialogTitle>
      <DialogDescription>This is a dialog description.</DialogDescription>
    </DialogHeader>
    <div className="space-y-4 py-4">
      <Input placeholder="Name" />
      <Input placeholder="Username" />
    </div>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancel</Button>
      </DialogClose>
      <Button>Save changes</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Text/Confirmation Dialog

<DialogContent>
  <DialogHeader>
    <DialogTitle>Dialog title</DialogTitle>
    <DialogDescription>This is a dialog description.</DialogDescription>
  </DialogHeader>
  <div className="text-sm text-muted-foreground">
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <DialogFooter>
    <DialogClose asChild>
      <Button variant="outline">Cancel</Button>
    </DialogClose>
  </DialogFooter>
</DialogContent>

Success Confirmation Dialog

<Dialog open={showSuccess} onOpenChange={setShowSuccess}>
  <DialogContent className="sm:max-w-[400px]">
    <div className="flex flex-col items-center text-center py-4">
      <div className="size-16 rounded-full bg-accent flex items-center justify-center mb-4">
        <CircleCheck className="size-8 text-accent-foreground" />
      </div>
      <DialogTitle>Payment Successful</DialogTitle>
      <DialogDescription className="mt-2">
        Your payment of $99.00 has been processed.
      </DialogDescription>
    </div>
    <DialogFooter>
      <Button className="w-full" onClick={() => setShowSuccess(false)}>
        Continue
      </Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Controlled Dialog

const [open, setOpen] = useState(false)

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent>/* ... */</DialogContent>
</Dialog>

Accessibility

• Built on Radix Dialog — handles focus trap and keyboard automatically
• Focus trapped within dialog when open; returns to trigger on close
• Keyboard: Escape to close, Tab/Shift+Tab to cycle focus
• Screen reader: announces as dialog role with aria-modal="true"
• Title/description linked via aria-labelledby/aria-describedby

Gotchas

See Also

• Accessibility: Dialog Accessibility Requirements - Focus trapping, keyboard behavior, ARIA
• Related Components: Alert Dialog, Sheet, Drawer
• Patterns: Component Match

Last updated: February 9, 2026