Skip to main content
Last modified: August 22, 2025
Include Button components to enable users to perform actions in app cards, such as submitting a form, sending data to an external system, or deleting data. Follow the design patterns below to keep your app card consistent with HubSpot’s designs. To learn more about implementation, check out the Button component reference documentation.

​
Patterns

Variants

  • Only include one primary button per surface (e.g., one per panel, one per modal). The button should be reserved for the main action that a user can perform.
  • To avoid confusion, don’t pair destructive variant buttons with primary buttons. Limit button pairings to either primary and secondary or destructive and secondary.
  • In general, use the default button size. You should only be sizing down if it’s necessary for the space that the button is being placed in (e.g., in a table with narrow rows).

Alignment

  • Always position buttons at the bottom of Form, Modal and Panel components.
  • Buttons should always be aligned to the left. When pairing primary and secondary variant buttons, the primary button should appear as the leftmost button. The only time you should align a button to the right of a container is for buttons that navigate through multi-step forms, as this is where the user will intuitively click.

​
Examples

The examples below are taken from HubSpot’s design patterns example app and Figma design kit.

​
Buttons in modals

View code in GitHub

​
Buttons in panels

View code in GitHub