Skip to main content

​
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.