Skip to main content
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.

​
Example

Call showDialog() from record actions. Hiding the dialog is automatically handled by Attio when the user closes it. 
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

TypeScript
async function showDialog(options: DialogOptions): Promise<void>

​
Returns

A Promise that resolves when the dialog is closed.

​
DialogOptions

​
title
string
required
The title of the dialog.
​
Dialog
React.FC<{ hideDialog: () => void }>
required
The contents of the dialog.