# Dialog: Controlled

> Pass `open` and `onOpenChange` to open it from code, without a trigger.

Example: https://hextaui.com/docs/dialog/examples/controlled
Component docs: https://hextaui.com/docs/dialog.md

## Add this example

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

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

## Source

```tsx title="components/examples/dialog/controlled.tsx"
"use client"

import * as React from "react"

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

export function DialogControlled() {
  const [open, setOpen] = React.useState(false)

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open from state
      </Button>
      <span className="text-sm text-muted-foreground">
        {open ? "Open" : "Closed"}
      </span>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Controlled dialog</DialogTitle>
            <DialogDescription>
              The open state lives in your component. Focus returns to the
              button that opened it.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <DialogClose render={<Button />}>Done</DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}
```

## Props in this example

### Dialog

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean, details) => void` | – |  |

### 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)
- [Nested](https://hextaui.com/docs/dialog/examples/nested.md)
- [Detached triggers](https://hextaui.com/docs/dialog/examples/detached-triggers.md)
- [Right to left](https://hextaui.com/docs/dialog/examples/rtl.md)