Dialog - Sabo

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

Alert DialogDestructive action confirmation dialog.

​When to use

​Accessibility

​Minimal usage

When to use

Accessibility

Minimal usage