> ## 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: 94194068-09ca-4d54-af58-85f6a289eeff
---

# Button design patterns

> Learn about the design patterns HubSpot recommends for using buttons in app cards.

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](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/button).

## Patterns

<Card title="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).
</Card>

<Card title="Alignment">
  * Always position buttons at the bottom of
    [Form](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/form), [Modal](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/modal) and [Panel](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/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.
</Card>

## Examples

The examples below are taken from HubSpot's [design patterns example app](https://github.com/HubSpot/ui-extensions-examples/tree/main/design-patterns) and [Figma design kit](/apps/developer-platform/add-features/ui-extensions/ui-components/crm-data-components/overview).

### Buttons in modals

<iframe width="645" height="450" src="https://embed.figma.com/design/jJ1Wq7Q3O0iLnbSZTyYjS6/HubSpot-Extensibility-Design-Kit?node-id=1422-2054&embed-host=share&footer=false&page-selector=false" />

[View code in GitHub](https://github.com/HubSpot/ui-extensions-examples/blob/main/design-patterns/src/app/extensions/components/ModalExample.tsx)

### Buttons in panels

<iframe width="645" height="450" src="https://embed.figma.com/design/jJ1Wq7Q3O0iLnbSZTyYjS6/HubSpot-Extensibility-Design-Kit?node-id=635-445&embed-host=share&footer=false&page-selector=false" />

[View code in GitHub](https://github.com/HubSpot/ui-extensions-examples/blob/main/design-patterns/src/app/extensions/components/PanelExample.tsx)