CrmCardActions - HubSpot docs

The CrmCardActions component renders a smaller standalone or dropdown menu button that can contain multiple CRM actions. This type of component is useful for enabling your extension to interact with other CRM entities, such as records and engagements. To learn more about how CRM action components work together, check out the CRM action components overview.

import { CrmCardActions } from "@hubspot/ui-extensions/crm";

<CrmCardActions
  actionConfigs={[
    {
      type: "action-library-button",
      label: "Preview",
      actionType: "PREVIEW_OBJECT",
      actionContext: {
        objectTypeId: "0-3",
        objectId: 14795354663,
      },
      tooltipText: "Preview this deal record.",
    },
    {
      type: "dropdown",
      label: "Activities",
      options: [
        {
          type: "action-library-button",
          label: "Send email",
          actionType: "SEND_EMAIL",
          actionContext: {
            objectTypeId: "0-1",
            objectId: 769851,
          },
        },
        {
          type: "action-library-button",
          label: "Add note",
          actionType: "ADD_NOTE",
          actionContext: {
            objectTypeId: "0-1",
            objectId: 769851,
          },
        },
      ],
    },
  ]}
/>;

Props

Unlike CrmActionButton and CrmActionLink where props such as actionType are accepted at the top level, CrmCardActions includes an actionConfigs prop which accepts fields for action configuration.

Prop	Type	Description
`actionConfigs`	Array	An array that stores fields for configuration button actions. See below for list of supported fields.
`label`	String	The button’s label text.
`onError`	`(errors: string[]) => void`	An optional callback that will pass any error messages that were generated. Common errors include missing required context values or the user not having sufficient permissions to perform an action.

In the actionConfigs array, you can include the following fields:

Field	Type	Description
`type`	`'action-library-button'` \| `'dropdown'`	The type of button to render: `action-library-button`: a standalone button that can perform one action. `dropdown`: a dropdown menu button containing multiple `'action-library-button'` actions. When using this type, you’ll need to include an `options` array containing each action.
`options`	Array	For `dropdown` type buttons, this array stores objects for each action in the dropdown menu. Each action should be set to the `'action-library-button'` type.
`actionType`	String	The type of action to perform. See list of available actions for more information.
`actionContext`	Object	An object containing the CRM object and record context for performing the action. See list of available actions for required context values.
`disabled`	Boolean	When set to `true`, the button or dropdown menu option will render in a disabled, greyed-out state and can’t be clicked.
`tooltipText`	String	Tooltip text that appears when hovering over the button or dropdown menu option.

​Props

​Related components

Props

Related components