ButtonGroup

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

Installation

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';

<ButtonGroup>
  <ButtonGroupItem>Label 1</ButtonGroupItem>
  <ButtonGroupItem>Label 2</ButtonGroupItem>
</ButtonGroup>;

API

ButtonGroupItem

PropTypeDescription
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

ButtonGroup

PropTypeDescription
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