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.
Variants
Only include one
primarybutton 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
destructivevariant buttons withprimarybuttons. Limit button pairings to eitherprimaryandsecondaryordestructiveandsecondary.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
Buttons should always be aligned to the left. When pairing
primaryandsecondaryvariant buttons, theprimarybutton 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.
The examples below are taken from HubSpot's design patterns example app and Figma design kit.