> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 669f7d13-cbd1-418a-8647-ef10e511f3d7
---

# CrmActionLink

> Learn about the CrmActionLink component for use in UI extensions.

The `CrmActionLink` component renders a clickable link that can execute a built-in set of [CRM actions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview#available-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](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview).

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/ui-extensions-crm-action-link.png?width=299&height=39&name=ui-extensions-crm-action-link.png" alt="ui-extensions-crm-action-link" />
</Frame>

```jsx theme={null}
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>
    </>
  );
});
```

## Props

| Prop            | Type                                                              | Description                                                                                                                                                                                                                                                        |
| --------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `actionContext` | Object                                                            | An object containing the CRM object and record context for performing the action. See [list of available actions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview#available-actions) for required context values. |
| `actionType`    | String                                                            | The type of action to perform. See [list of available actions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/overview#available-actions) for more information.                                                           |
| `onClick`       | `() => void`                                                      | A function that will be invoked when the button is clicked. It receives no arguments and its return value is ignored.                                                                                                                                              |
| `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.                                                              |
| `variant`       | `'primary'` (default) \| `'light'` \| `'dark'` \| `'destructive'` | The color variation of the link. See the [variants section](#variants) for more information.                                                                                                                                                                       |

## Variants

Using the `variant` prop, you can control the color of the link.

* `'primary'`: the default blue (`#0091ae`).

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/design-guidelines-links_4.png?width=206&height=37&name=design-guidelines-links_4.png" alt="design-guidelines-links_4" />
</Frame>

* `'light'`: a white link that turns to a lighter shade of blue on hover (`#7fd1de`).

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/design-guidelines-links_3.png?width=206&height=34&name=design-guidelines-links_3.png" alt="design-guidelines-links_3" />
</Frame>

* `'dark'`: a darker shade of blue (`#33475b`).

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/design-guidelines-links_2.png?width=206&height=38&name=design-guidelines-links_2.png" alt="design-guidelines-links_2" />
</Frame>

* `'destructive'`: a red link (`#f2545b`).

<Frame>
  <img src="https://developers.hubspot.com/hs-fs/hubfs/Knowledge_Base_2023/design-guidelines-links_1.png?width=206&height=37&name=design-guidelines-links_1.png" alt="design-guidelines-links_1" />
</Frame>

## Related components

* [CrmActionButtons](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-button)
* [Button](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button)
* [CrmCardActions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-card-actions)