ButtonRow | UI components (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

The ButtonRow component renders a row of Button components. In ButtonRow, you'll specify individual Button components.  Use this component When you want to include multiple buttons in a row.

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 Disables the dropdown list of buttons that appears when child button expand beyond horizontal space. By default, set to false.

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.