ButtonGroup

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

Version 0.5.3

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, { ButtonItem } from '@igloo-ui/button-group';

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

API

ButtonItem

Prop	Type	Default	Description
`children`	ReactNode	-	The content to display inside the `ButtonItem`
`active`	boolean	-	Whether or not the `ButtonItem` is active
`disabled`	boolean	-	Disabled the `ButtonItem`, the user cannot click on them
`onClick`	(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void	-	Callback function executed when a `ButtonItem` is clicked
`dataTest`	string	-	Add a data-test tag for automated tests
`icon`	ReactNode	-	Icon to display to the left of button content

ButtonGroup

Prop	Type	Default	Description
`compact`	boolean		Changes the padding of button group
`small`	boolean		Changes the size of button group
`children`	ReactNode	-	React child node representing the button content text or icon
`dataTest`	string	-	Add a data-test tag for automated tests
`className`	string	-	Add a specific class to the button group