ButtonRow

The ButtonRow component renders a row of specified Button components. Use this component when you want to include multiple buttons in a row. When the number of included buttons exceeds the available space, the extra buttons will be presented as a Dropdown style button, which you can configure using the dropDownButtonOptions prop.

Primary button: use for the most frequently-used or important actions.
Secondary button: typically paired with a primary and/or destructive button.
Destructive button: only use for actions that are destructive, paired with a secondary button.

import { Button, ButtonRow } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <ButtonRow disableDropdown={false}>
      <Button
        onClick={() => {
          console.log("Regular button clicked");
        }}
      >
        Regular Button
      </Button>
      <Button
        onClick={() => {
          console.log("Reset button clicked");
        }}
        variant="destructive"
        type="reset"
      >
        Reset
      </Button>
      <Button
        onClick={() => {
          console.log("Submit button clicked");
        }}
        variant="primary"
        type="submit"
      >
        Submit
      </Button>
    </ButtonRow>
  );
};

Props

Prop	Type	Description

Buttons that exceed available space will be presented in one Dropdown style button. You can use the dropDownButtonOptions prop to customize its appearance. This prop takes an object that can include size, text, and variant fields. The size and variant fields use the same options available for those props in the Dropdown component.

Comma-separate values in dropDownButtonOptions to configure multiple options.

buttonrow-dropdown-multiple-values-example

import { Button, ButtonRow } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <ButtonRow
      dropDownButtonOptions={{
        text: "Extra",
        size: "sm",
        variant: "transparent",
      }}
    >
      <Button variant="primary">Primary</Button>
      <Button variant="destructive" type="reset">
        Destructive
      </Button>
      <Button type="submit">Submit</Button>
      <Button type="button">Other</Button>
    </ButtonRow>
  );
};

Usage examples

A 'primary' and 'secondary' button in a row to progress through a multi-step form.

A 'destructive' and 'secondary' button in a row to confirm and cancel a contact deletion.

Guidelines

DO: include a secondary button with a destructive button to allow users to cancel the action.
DO: pair primary and secondary buttons to indicate hierarchy of actions.
DON’T: use multiples of the same button type in a row. For example, don’t include more than one primary button in one row.

Build apps

Add features

Publish to the HubSpot Marketplace

Skeleton group 5

Props

Usage examples

Guidelines

​Props

​Dropdown variants

​Usage examples

​Guidelines

​Related components

Props

Dropdown variants

Usage examples

Guidelines

Related components