showDialog()

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.

src/app/extensions/aurora/extension.tsx

import React from "react"
import {Extensions, showDialog} from "attio/client"
import {AuroraDialog} from "./aurora-dialog"

export default Extensions.defineExtension({
  type: "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

string

required

The title of the dialog.

React.FC<{ hideDialog: () => void }>

required

The contents of the dialog.

⌘I

Introduction

Guides

Extensions

Workflow blocks

Notifications

Dialogs

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

API

Returns

DialogOptions

​Example

​API

​Returns

​DialogOptions

Example

API

Returns

DialogOptions