Dialog

Use a dialog for an intentional, focused task that does not need a full page. The trigger remains in the page flow while the modal owns focus until it closes.

Edit workshopChanges stay local to this example.

Show codeCopy

Import

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@workshop1/ui/components/dialog"

Anatomy

Pair DialogTitle with DialogDescription so the primitive can expose a useful accessible name and description. Keep the primary action in DialogFooter, and provide a visible cancel action when the task is reversible.

<Dialog>
  <DialogTrigger asChild><Button>Open</Button></DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>...</DialogTitle>
      <DialogDescription>...</DialogDescription>
    </DialogHeader>
    <DialogFooter>...</DialogFooter>
  </DialogContent>
</Dialog>

Behaviour

• The overlay, Escape key, close button and trigger restore focus through Radix.
• Use controlled open state when a successful submit needs to close the dialog or update surrounding content.
• Keep the body short. Use a sheet or page when the task needs substantial navigation or scrolling.

Best practices

• Open from a clear action and use a task-specific title.
• Keep one primary action and make cancellation obvious.
• Show validation beside the affected field without closing the dialog.