Design System/Atoms/Dialog

Dialog

Modal overlay for focused tasks and confirmations.

When To Use

  • Use Dialog when content needs to appear in context without forcing a full page transition.
  • Match the overlay type to the weight of the task: lightweight guidance for hints, stronger containment for focused tasks.
  • Review the examples below to compare trigger styles, content density, and dismissal expectations.

When Not To Use

  • Do not move a full workflow into an overlay if the user needs persistent navigation, rich context, or deep editing space.
  • Do not rely on an overlay for critical messaging when it can be missed, dismissed accidentally, or blocked by focus issues.

Accessibility Notes

  • Move focus into the overlay when it opens and return focus to the trigger when it closes.
  • Support Escape to dismiss non-destructive overlays and ensure the trigger communicates expanded state where appropriate.
  • Do not hide critical actions behind hover-only disclosure; keyboard and touch users need equivalent access.

Key Props / API

Key exports

DialogRoot, DialogTrigger, DialogOverlay, DialogContent, DialogHeader, DialogFooter

Example Code

import {
  Dialog, DialogTrigger, DialogContent,
  DialogHeader, DialogFooter, DialogTitle, DialogDescription,
} from "@hilum/ui"
import { Button } from "@hilum/ui"

<Dialog>
  <DialogTrigger asChild>
    <Button variant="outline">Delete voice</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete voice clone?</DialogTitle>
      <DialogDescription>
        This action cannot be undone. The voice clone "Roger" will be
        permanently removed from your library.
      </DialogDescription>
    </DialogHeader>
// ...trimmed for docs

Dialog

Confirmation dialog

Modal overlay with title, description, and action buttons