Button Group

A collection of buttons commonly used to select an option


A Button group is a useful component for grouping together buttons to allow a user to select an option.

DayMonthWeekThe Button Group Component.


The Button Group acts as a wrapper for multiple buttons. It removes the spacing and border radius between adjacent buttons, making them sit flush next to each other. It is used to indicate a relationship between similar actions - pagination and toolbars are great examples of this.


The Button Group by itself doesn't have any visual elements. The Group simply removes the spacing between buttons and makes them sit flush beside each other.

ButtonsDayMonthWeekThe Button Group Anatomy.1Container2
  1. Container - wraps the component and removes border-radius and spacing between buttons.
  2. Buttons - the Button Components added to the Group.

Sizing & Spacing

The Button Group should always use the same size Button components. This allows the buttons to be positioned flush against each other. The Buttons themselves though can be any of the available sizes outlined on the Button Docs page.

Hierarchy & Placement

The Button Group is used to collate similar actions together under one consistent grouping. It should only feature Secondary Buttons, as Primary Buttons should be standalone actions.

A ButtonGroup accepts an array of button items that provide a label and value for each button. The component then generates a collection of buttons, grouped together, styled similar to a secondary button with a primary hover.

Basic Usage

  <ButtonGroupItem onClick={/* handle click */}>One</ButtonGroupItem>


<ButtonGroup size="small">
  /* items */
<ButtonGroup size="regular">
  /* items */
<ButtonGroup size="large">
  /* items */
<ButtonGroup size="xlarge">
  /* items */


  <ButtonGroupItem icon={<IconFileDownload />}>One</ButtonGroupItem>
  <ButtonGroupItem icon={<IconAccessAlarm />}>Two</ButtonGroupItem>
  <ButtonGroupItem icon={<IconAccessTime />}>Three</ButtonGroupItem>


childrenReact.ReactElement<ButtonGroupItemProps>[]Truen/aButtons to be displayed in the group
classNamestringFalsen/aCustom CSS class to add to the button group
sizestring (small/regular/large/xlarge)FalseregularThe size for the buttons
childrenstingTruen/aText to be displayed on the button
isDisabledbooleanFalsen/aMark the button as disabled/inactive
iconReactNodeFalsen/aIcon to display to the right of text in the button. Accepts any Node but ideally would be an image or SVG tag
onClick(FormEvent<HTMLButtonElement>):voidFalsen/aThe function to call when a user clicks on the button generated for the item