Last modified: August 22, 2025
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.
design-guide-button-row-component
  1. Primary button: only use one per extension.
  2. Secondary button: only use with a primary and/or destructive button.
  3. 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>
  );
};
PropTypeDescription
disableDropdownBooleanBy default, when the number of buttons exceeds the available horizontal space, the extra buttons will collapse into a single dropdown menu button. Set this prop to true to prevent the dropdown button from being interacted with. Default is false.
dropDownButtonOptionsObjectWhen the included buttons exceed the available space, use this prop to customize the dropdown button. This prop takes an object containing the following key: 'value' pairs:
  • size: the size of the button. Can be 'xs', 'sm', or 'md' (default).
  • text: the button’s text. By default, is set to More. If set to an empty value, will display a gear icon.
  • variant: the button variation. Can be 'primary', 'secondary' (default), or 'transparent'.
Learn more about dropdown button variants.
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.
buttonrow-dropdown-variants
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.
design-guide-button-row-example
  • A 'destructive' and 'secondary' button in a row to confirm and cancel a contact deletion.
buttonrow-example-cancel-delete-contact

​
Guidelines

  • DO: include a secondary button with a destructive button to allow users to cancel the action.
  • 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.
  • DON’T: use more than two secondary buttons in a single extension.
  • DON’T: use more than three buttons in a row.