> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> Modal dialog for confirmations and forms.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/dialog-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=c6693204a18a6d823dace2f2eaf9f69a" alt="Dialog component preview (light)" width="400" data-path="images/ui/dialog-light.png" />
</Frame>

* **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

```tsx sabo/src/components/ui/dialog.tsx theme={null}
<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>
```

<Note>
  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](https://www.radix-ui.com/primitives/docs/components/dialog)
</Note>