Skip to main content
Dialog component preview (light)
  • Location: sabo/src/components/ui/dialog.tsx

​
When to use

  • Use for non-destructive tasks: forms, settings, previews, details.
  • Dismissible via Esc or outside click (unless you disable it).
  • Flexible body content with header/footer slots.

​
Accessibility

  • Renders with proper dialog semantics; focus moves into the dialog.
  • Return focus to the trigger when closed.

​
Minimal usage

sabo/src/components/ui/dialog.tsx
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Short description of the task.</DialogDescription>
    </DialogHeader>
    {/* dialog body */}
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
  {/* close button is built in */}
  {/* <DialogClose /> */}
</Dialog>
This component forwards all props from Radix Dialog primitives (Root/Trigger/Content, etc.). Above are commonly used props. For the full API, see Radix docs: https://www.radix-ui.com/primitives/docs/components/dialog