npm package: @paprika/button-group
Description: ButtonGroup component is a segmented group of toggle buttons.
Author: @paprika
Latest version: 1.0.34

<!-- start: Autogenerated - do not modify -->

# @paprika/button-group

## Description

ButtonGroup component is a segmented group of toggle buttons.

## Installation

```
yarn add @paprika/button-group
```

or with npm:

```
npm install @paprika/button-group
```

## Props

### ButtonGroup

| Prop        | Type                                                                                         | required | default                       | Description                                                                                                                                          |
| ----------- | -------------------------------------------------------------------------------------------- | -------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| children    | node                                                                                         | false    | null                          | The toggle buttons in the group.                                                                                                                     |
| hasIcons    | bool                                                                                         | false    | false                         | To show the icons used for selected / not selected.                                                                                                  |
| isDisabled  | bool                                                                                         | false    | false                         | If the entire button group is disabled.                                                                                                              |
| isFullWidth | bool                                                                                         | false    | false                         | If the width of the button group should stretch to fit its parent container (100%).                                                                  |
| isMulti     | bool                                                                                         | false    | false                         | If multiple simultaneous selections are allowed.                                                                                                     |
| isSemantic  | bool                                                                                         | false    | true                          | If it will be rendered as a button element. If false, a span will be rendered via an accessible RawButton.                                           |
| onChange    | func                                                                                         | false    | () => {}                      | Callback to be executed when any button item is clicked or activated by keyboard. It will return an array of the selected items' "value" properties. |
| size        | [ ButtonGroup.types.size.SMALL, ButtonGroup.types.size.MEDIUM, ButtonGroup.types.size.LARGE] | false    | ButtonGroup.types.size.MEDIUM | Size of the buttons (height, font size, etc).                                                                                                        |

### ButtonGroup.Item

| Prop            | Type            | required | default | Description                                  |
| --------------- | --------------- | -------- | ------- | -------------------------------------------- |
| children        | node            | false    | null    | Content label of the button to be displayed. |
| defaultIsActive | bool            | false    | false   | If the item is active or on selected state   |
| value           | [string,number] | true     | -       | Unique key to represent the selected value.  |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

```js
import ButtonGroup from "@paprika/button-group";

const yourComponent = () => {
  const handleChange = selectedValues => {
    // do something with array of selected values
  };

  return (
    <ButtonGroup onChange={handleChange}>
      <ButtonGroup.Item value={1} defaultIsSelected>
        One
      </ButtonGroup.Item>
      <ButtonGroup.Item value={2}>Two</ButtonGroup.Item>
      <ButtonGroup.Item value={3}>Three</ButtonGroup.Item>
    </ButtonGroup>
  );
};
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/buttons-buttongroup--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/ButtonGroup/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/button-group%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/ButtonGroup/CHANGELOG.md)