ButtonGroup displays multiple related actions or options stacked in a horizontal row to help with arrangement and spacing.


To install @igloo-ui/button-group in your project, you will need to run the following command using npm:

npm install @igloo-ui/button-group

If you prefer Yarn, use the following command instead:

yarn add @igloo-ui/button-group

Then to use the component in your code just import it!

import ButtonGroup from '@igloo-ui/button-group';

  <ButtonGroupItem>Label 1</ButtonGroupItem>
  <ButtonGroupItem>Label 2</ButtonGroupItem>



childrenReactNodeThe content to display inside the `ButtonItem`
activebooleanWhether or not the `ButtonItem` is active
disabledbooleanDisabled the `ButtonItem`, the user cannot click on them
onClick(e: MouseEvent<HTMLButtonElement, MouseEvent>) => voidCallback function executed when a `ButtonItem` is clicked
dataTeststringAdd a data-test tag for automated tests
iconReactNodeIcon to display to the left of button content


compactbooleanChanges the padding of button group
smallbooleanChanges the size of button group
childrenReactNodeReact child node representing the button content text or icon
dataTeststringAdd a data-test tag for automated tests
classNamestringAdd a specific class to the button group