ButtonRow | UI components (BETA)

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> ); };
Prop Type Description
disableDropdown Boolean By 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.
dropDownButtonOptions Object When 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.

Dropdown 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.

Related components

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.