# Dialog: Detached triggers

> Create a handle with `createDialogHandle()` to share one dialog between many triggers. Each trigger passes a `payload` that the dialog reads through a render function.

Example: https://hextaui.com/docs/dialog/examples/detached-triggers
Component docs: https://hextaui.com/docs/dialog.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dialog-detached-triggers.json
```

This adds `components/examples/dialog/detached-triggers.tsx` with the Dialog component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dialog/detached-triggers.tsx"
"use client"

import { Button } from "@/components/ui/button"
import {
  createDialogHandle,
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"

const people = createDialogHandle<{ name: string; role: string }>()

export function DialogDetachedTriggers() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <DialogTrigger
        handle={people}
        payload={{ name: "Ada Lovelace", role: "Owner" }}
        render={<Button variant="outline" size="sm" />}
      >
        Ada
      </DialogTrigger>
      <DialogTrigger
        handle={people}
        payload={{ name: "Linus Torvalds", role: "Member" }}
        render={<Button variant="outline" size="sm" />}
      >
        Linus
      </DialogTrigger>
      <Dialog handle={people}>
        {({ payload }) => (
          <DialogContent size="sm">
            <DialogHeader>
              <DialogTitle>{payload?.name}</DialogTitle>
              <DialogDescription>Role: {payload?.role}</DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <DialogClose render={<Button />}>Done</DialogClose>
            </DialogFooter>
          </DialogContent>
        )}
      </Dialog>
    </div>
  )
}
```

## Props in this example

### Dialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `DialogHandle<Payload>` | – | Connects detached triggers. |

### DialogTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `DialogHandle<Payload>` | – |  |
| `payload` | `Payload` | – | Passed to the dialog’s render function. |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DialogContent

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |

### DialogClose

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Dialog examples

- [Form](https://hextaui.com/docs/dialog/examples/form.md)
- [Custom close button](https://hextaui.com/docs/dialog/examples/custom-close-button.md)
- [No close button](https://hextaui.com/docs/dialog/examples/no-close-button.md)
- [Sizes](https://hextaui.com/docs/dialog/examples/sizes.md)
- [Sticky footer](https://hextaui.com/docs/dialog/examples/sticky-footer.md)
- [Scrollable content](https://hextaui.com/docs/dialog/examples/scrollable-content.md)
- [Controlled](https://hextaui.com/docs/dialog/examples/controlled.md)
- [Nested](https://hextaui.com/docs/dialog/examples/nested.md)
- [Right to left](https://hextaui.com/docs/dialog/examples/rtl.md)