> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# showDialog()

> Show a dialog box

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/dialog.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=8382f7d690adc03b3bde9da44d844d5b" data-path="images/dialog.png" />

<img className="hidden dark:block" width="720" height="440" src="https://mintcdn.com/attio/4Fh2EPa8-SlLTNAV/images/dialog-dark.png?fit=max&auto=format&n=4Fh2EPa8-SlLTNAV&q=85&s=152f14974743b47e31894f064e6e75a3" data-path="images/dialog-dark.png" />

<Tip>
  If you call `showDialog()` from within an already-open dialog, a new dialog will be shown
  on top of the existing one, with breadcrumbs showing the user the titles of the dialogs under
  the top one.

  Clicking outside the dialog will close them all. `Esc` or clicking the "back" button will close
  the top-most dialog.
</Tip>

## Example

Call `showDialog()` from record actions. Hiding the dialog is automatically handled by Attio when the user closes it.

```tsx theme={"system"}
import React from "react"
import type {App} from "attio"
import {showDialog} from "attio/client"
import {AuroraDialog} from "./aurora-dialog"

export const auroraAction: App.Record.Action = {
  id: "aurora",
  label: "Aurora",
  onTrigger: async ({recordId}) => {
    showDialog({
      title: "Aurora",
      Dialog: () => {
        // This is a React component. It can use hooks and render other components.
        return <AuroraDialog recordId={recordId} />
      },
    })
  },
}
```

## API

```ts TypeScript theme={"system"}
async function showDialog(options: DialogOptions): Promise<void>
```

## Returns

A `Promise` that resolves when the dialog is closed.

## DialogOptions

<ParamField path="title" type="string" required>
  The title of the dialog.
</ParamField>

<ParamField path="Dialog" type="React.FC<{ hideDialog: () => void }>" required>
  The contents of the dialog.
</ParamField>