# Dialog

Bottom sheet by default with a grabber, or a centred card. Portalled above navigation.

[Documentation](https://eoria.adamtrip.pt/components/dialog/)

[Registry source](https://eoria.adamtrip.pt/r/dialog.json)

npm dependencies: @eoria/core, react-native-reanimated, react-native-worklets.

Registry dependencies: portal, text.

```sh
npx @eoria/cli add dialog
```

## Usage

```tsx
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete account</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete your account?</DialogTitle>
      <DialogDescription>This cannot be undone.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="destructive" width="full" onPress={remove}>
          Delete
        </Button>
      </DialogClose>
      <DialogClose asChild>
        <Button variant="ghost" width="full">
          Keep account
        </Button>
      </DialogClose>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

## Props

`Dialog` takes `open`, `defaultOpen`, `onOpenChange` and `placement` (`bottom` default, `center`). `DialogContent` takes `dismissable` (tap outside closes, default true) and `closeLabel`, what TalkBack reads for the overlay (default `Close dialog`). Trigger and Close accept `asChild` to inject `onPress` into a single child.

## Notes

- The footer stacks actions full width, primary first, which is the pattern on phones. Center placement keeps the same order.
- Bottom placement slides 24pt and fades in 120 ms. Center scales from 0.97. No springs.
- Android back closes it. The overlay is a button named by `closeLabel` for TalkBack; on iOS the portal host is marked modal so VoiceOver stays inside. Pass a translated `closeLabel` in a localised app.
- Context does not cross the portal, so `DialogContent` re-provides it. If you build your own portal content, do the same.
- For a draggable sheet with snap points, use [Sheet](https://eoria.adamtrip.pt/components/sheet.md), which wraps `@gorhom/bottom-sheet`. Dialog stays dependency-free.

## Source

[`registry/ui/dialog.tsx`](https://github.com/adamtrip-solutions/eoria/blob/main/registry/ui/dialog.tsx)