CrmActionButton | UI components (BETA)

The CrmActionButton component renders a button that can execute a built-in set of 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.

ui-extensions-crm-action-button

import { CrmActionButton } from '@hubspot/ui-extensions/crm'; <CrmActionButton actionType="PREVIEW_OBJECT" actionContext={{ objectTypeId: "0-3", objectId: 123456 }} variant="secondary" > Preview deal </CrmActionButton>
Prop Type Description
actionType Required String The type of action to perform. See list of available actions for more information.
actionContext Required Object An object containing the CRM object and record context for performing the action. See list of available actions for required context values.
variant 'primary' | 'secondary' (default) | 'destructive' The color variation of the button.
type 'button' (default) | 'reset' | 'submit' The button's HTML role attribute.
size 'xs', 'extra-small' | 'sm', 'small' | 'md', 'medium' (default) The size of the button.
disabled Boolean When set to to true, button renders in a disabled, greyed-out state and cannot be clicked.
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.

Variants

Using the variant prop, you can set the color of the button.

  • Primary: a dark blue button for the most frequently used or most important action on an extension. Each extension should only have one primary button.
    design-guide-button-type-primary
    • Secondary: a grey button to provide alternative or non-primary actions. Each extension should include no more than two secondary buttons.
      design-guide-button-type-secondary
  • Destructive: a red button for actions that delete, disconnect, or perform any action that the user can't undo. Button text should clearly communicate what is being deleted or disconnected. After a destructive button is clicked, the user should have to verify or confirm the action.
    design-guide-button-type-destructive

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.