The Widget API is experimental and may change in the future. It has been marked as @deprecated to remind the developer that it is experimental. It is not “deprecated”, just experimental. Please don’t use it in production versions of your app. We do not guarantee backward compatibility, or that the API will remain stable.
import {RecordWidget} from "attio/client"
Any file with a named export of recordWidget will register a record widget
Before your record widget will appear on a record page, you will need to go to “Configure page”, click on “Add Widget”, and select your widget.

​
Arguments

​
id
string
required
The unique identifier for this widget.It is only used internally; never shown to the user.
​
label
string
required
A human-readable label of the widget that will be shown to the user in the widget picker.
​
color
string
The base hexadecimal color of the gradient displayed in the background of the widget.
​
Widget
(props: { recordId: string, object: ObjectSlug }) => React.ReactNode
required
A React component that will render the widget.It can suspend while loading data.Must return a one of the following components as the root element:
​
objects
ObjectSlug | Array<ObjectSlug>
A single slug or an array of slugs to select which types of record the record action will apply to.Defaults to undefined, which will cause the action to show on all types of records.The built-in slugs are

​
Example

TypeScript
import React from "react"
import type {RecordWidget, Widget} from "attio/client"
import {useMyArrQuery} from "your-code-somewhere.ts"

const ArrWidget = ({recordId} : {recordId: string}) => {
  const { arr, delta } = useMyArrQuery(recordId) // may suspend!
  return (
    <Widget.TextWidget>
      <Widget.Title>ARR</Widget.Title>
      <Widget.Text.Primary>{arr}</Widget.Text.Primary>
      <Widget.Badge text={delta} color={delta < 0 ? "red" : "green"}/>
    </Widget.TextWidget>
  )
}

export const recordWidget: RecordWidget = {
  id: "company-arr",
  label: "ARR",
  Widget: ({recordId}) => {
    return (
      <React.Suspense fallback={<Widget.Loading />}>
        <ArrWidget recordId={recordId}/>
      </React.Supsense>
    )
  },
  objects: "companies" // only show on company records
}