Skip to main content
The Button component renders a single button. Use this component to enable users to perform actions, such as submitting a form, sending data to an external system, or deleting data. Button text is passed into the component like a standard HTML element, rather than through a prop. Below, learn how to implement buttons in a UI extension. For guidance on button design, check out the Button design patterns.
A single button component demonstrating the example code below

​
Props

​
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.
A primary button variant, rendered as a dark blue button
  • 'secondary': a grey button to provide alternative or non-primary actions. Each extension should include no more than two secondary buttons.
A secondary button variant, rendered as a grey button
  • '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.
A destructive button variant, rendered as a red button
  • 'transparent': a button with the background and border color removed, styled like a hyperlink.
A transparent button variant, styled without a background or border, appearing like a hyperlink
Please note:HubSpot does not provide variant options for the orange buttons you’ll find across the app (both solid and outlined). Those color variants are reserved for the HubSpot product, which helps to maintain the hierarchy of available actions on a given page.

​
Usage examples

  • Use a 'primary' button at the end of a form to submit data to another system.
  • Use a 'secondary' button next to a primary form submit button to reset form fields.
  • Use a 'destructive' button to enable users to delete a contact’s data from an external system.
  • Set a button to 'disabled' when a contact doesn’t qualify for a form submission due to missing criteria or other ineligibility.

​
Guidelines

  • DO: set button text that clearly communicates what action will occur when a user clicks it. Text should be unambiguous and concise (~2-4 words).
  • DO: use sentence-casing for button text (only the first word capitalized).
  • DO: minimize the number of buttons that appear on a page record across all extensions.
  • DO: always open links to pages outside of the HubSpot app in a new tab (external: true).
  • DON’T: include multiple primary buttons in a single extension.
  • DON’T: use a destructive button unless the consequences are significant or irreversible.
Last modified on September 11, 2026