> ## 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: 1ece462b-7ad6-4cbc-8a17-38adbd679790
---

# CrmActionButton

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

The `CrmActionButton` component renders a button 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-button.png?width=397&height=64&name=ui-extensions-crm-action-button.png" alt="ui-extensions-crm-action-button" />
</Frame>

```jsx theme={null}
import { CrmActionButton } from "@hubspot/ui-extensions/crm";

<CrmActionButton
  actionType="PREVIEW_OBJECT"
  actionContext={{
    objectTypeId: "0-3",
    objectId: 123456,
  }}
  variant="secondary"
>
  Preview deal
</CrmActionButton>;
```

## 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.                                                           |
| `disabled`      | Boolean                                                                      | When set to `true`, button renders in a disabled, greyed-out state and cannot be clicked.                                                                                                                                                                          |
| `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.                                                              |
| `size`          | `'xs'`, `'extra-small'` \| `'sm'`, `'small'` \| `'md'`, `'medium'` (default) | The size of the button.                                                                                                                                                                                                                                            |
| `type`          | `'button'` (default) \| `'reset'` \| `'submit'`                              | The button's HTML `role` attribute.                                                                                                                                                                                                                                |
| `variant`       | `'primary'` \| `'secondary'` (default) \| `'destructive'`                    | The color variation of the button.                                                                                                                                                                                                                                 |

## 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.

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guide-button-type-primary.png" alt="design-guide-button-type-primary" />
</Frame>

* `'secondary'`: a grey button to provide alternative or non-primary actions. Each extension should include no more than two secondary buttons.

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guide-button-type-secondary.png" alt="design-guide-button-type-secondary" />
</Frame>

* `'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.

<Frame>
  <img src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/design-guide-button-type-destructive.png" alt="design-guide-button-type-destructive" />
</Frame>

## Related components

* [CrmActionLink](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-action-link)
* [CrmCardActions](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-action-components/crm-card-actions)
* [Dropdown](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/dropdown)