Last modified: August 22, 2025
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>;
PropTypeDescription
actionTypeStringThe type of action to perform. See list of available actions for more information.
actionContextObjectAn 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.
disabledBooleanWhen set to to true, button renders in a disabled, greyed-out state and cannot be clicked.
onError(errors: string[]) => voidAn 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