# Dialog

A modal dialog with focus trapping.

Group: Overlays & Feedback

## Import

```tsx
import { Dialog } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function DialogDemo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <Button variant="outline">Buka dialog</Button>
      </Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop />
        <Dialog.Positioner>
          <Dialog.Content>
            <Dialog.Header>
              <Dialog.Title>Judul dialog</Dialog.Title>
            </Dialog.Header>
            <Dialog.Body>Isi dialog. Tekan Esc atau klik di luar untuk menutup.</Dialog.Body>
            <Dialog.Footer>
              <Dialog.ActionTrigger asChild>
                <Button variant="outline">Batal</Button>
              </Dialog.ActionTrigger>
              <Button>Simpan</Button>
            </Dialog.Footer>
            <Dialog.CloseTrigger />
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  )
}
```