Last modified: August 22, 2025
The CrmActionLink component renders a clickable link 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-link
import { CrmActionLink } from '@hubspot/ui-extensions/crm';

const dealContext = {
  objectTypeId: '0-3',
  objectId: 14795354663,
};

hubspot.extend(({ context, runServerlessFunction, actions }) => {
  return (
    <>
      <CrmActionLink actionType="ADD_NOTE" actionContext={dealContext}>
        Add a note about this deal to the record
      </CrmActionLink>
    </>
  );
});
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' (default) | 'light' | 'dark' | 'destructive'The color variation of the link. See the variants section for more information.
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 control the color of the link.
  • 'primary': the default blue (#0091ae).
design-guidelines-links_4
  • 'light': a white link that turns to a lighter shade of blue on hover (#7fd1de).
design-guidelines-links_3
  • 'dark': a darker shade of blue (#33475b).
design-guidelines-links_2
  • 'destructive': a red link (#f2545b).
design-guidelines-links_1