# Drawer: Detached triggers

> Share one drawer between several triggers with `createDrawerHandle`. Each trigger passes a `payload` that the drawer renders through a function child.

Example: https://hextaui.com/docs/drawer/examples/detached
Component docs: https://hextaui.com/docs/drawer.md

## Add this example

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

This adds `components/examples/drawer/detached.tsx` with the Drawer component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/drawer/detached.tsx"
"use client"

import { Button } from "@/components/ui/button"
import {
  createDrawerHandle,
  Drawer,
  DrawerBody,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer"

const contacts = createDrawerHandle<{ name: string; email: string }>()

export function DrawerDetached() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Olivia Martin", email: "olivia@example.com" }}
        render={<Button variant="outline" size="sm" />}
      >
        Olivia
      </DrawerTrigger>
      <DrawerTrigger
        handle={contacts}
        payload={{ name: "Jackson Lee", email: "jackson@example.com" }}
        render={<Button variant="outline" size="sm" />}
      >
        Jackson
      </DrawerTrigger>
      <Drawer handle={contacts}>
        {({ payload }) => (
          <DrawerContent>
            <DrawerHeader>
              <DrawerTitle>{payload?.name}</DrawerTitle>
              <DrawerDescription>{payload?.email}</DrawerDescription>
            </DrawerHeader>
            <DrawerBody>
              <p className="text-sm text-muted-foreground">
                One drawer, opened by either trigger.
              </p>
            </DrawerBody>
          </DrawerContent>
        )}
      </Drawer>
    </div>
  )
}
```

## Props in this example

### Drawer

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `DrawerHandle<Payload>` | – |  |

### DrawerTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `handle` | `DrawerHandle<Payload>` | – |  |
| `payload` | `Payload` | – |  |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## More Drawer examples

- [Directions](https://hextaui.com/docs/drawer/examples/directions.md)
- [Snap points](https://hextaui.com/docs/drawer/examples/snap-points.md)
- [Scrollable content](https://hextaui.com/docs/drawer/examples/scrollable.md)
- [Forms and the keyboard](https://hextaui.com/docs/drawer/examples/keyboard.md)
- [Nested](https://hextaui.com/docs/drawer/examples/nested.md)
- [Confirm from a drawer](https://hextaui.com/docs/drawer/examples/confirm.md)
- [Responsive](https://hextaui.com/docs/drawer/examples/responsive.md)
- [Non-modal](https://hextaui.com/docs/drawer/examples/non-modal.md)
- [Controlled](https://hextaui.com/docs/drawer/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/drawer/examples/rtl.md)