npm package: @licuido-ui/ui_button-group
Description: The ButtonGroup component provides a group of buttons, allowing users to select one option from a set of choices. The selected button is highlighted with a specified color, while unselected buttons have a different background color. This component is usef
Latest version: 0.0.2

# ButtonGroup

The ButtonGroup component provides a group of buttons, allowing users to select one option from a set of choices. The selected button is highlighted with a specified color, while unselected buttons have a different background color. This component is useful for creating interactive UI elements, such as filters, tabs, or toggles.

### Author

- @author Akila Kalaiyarasan <akila@crayond.co>

## Link

[Story Book Link ButtonGroup](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_button-group
```

## Import component

```jsx
import { ButtonGroup } from '@licuido-ui/ui_button-group';
```

## Usage

```jsx
<ButtonGroup buttons={[]} />
```

## Image

![buttonGroup](./buttonGroup.png)

## Sample Code

```jsx
<ButtonGroup
  buttons={buttons}
  onClick={handleButtonClick}
  selectedColor='#fff'
  selectedBgColor='blue'
  unselectBgColor='lightgray'
  color='black'
  fontSize='16px'
  fontWeight='bold'
  variant='contained'
/>
```

## Props

| Prop Name       | Type                                                           | Default       | Description                                                                           |
| --------------- | -------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------- |
| id              | This id unique and To run BDD test , also applied in `data-id` | string        | string                                                                                |
| buttons         | `ButtonItem[]`                                                 | `[]`          | An array of button items, each with a label and value.                                |
| onClick         | `(e: MouseEvent<HTMLButtonElement>, value: number) => void`    | `() => false` | Callback function when a button is clicked.                                           |
| variant         | `'outlined' \| 'contained'`                                    | `'contained'` | The style variant for the buttons. Possible values are `'outlined'` or `'contained'`. |
| size            | `'small' \| 'medium' \| 'large'`                               | `'medium'`    | The size of the buttons. Possible values are `'small'`, `'medium'`, or `'large'`.     |
| disabled        | `boolean`                                                      | `false`       | Whether the button group is disabled or not.                                          |
| selectedColor   | `string`                                                       | `''`          | The text color of the selected button.                                                |
| unselectBgColor | `string`                                                       | `''`          | The background color of unselected buttons when `variant` is `'contained'`.           |
| color           | `string`                                                       | `'#fff'`      | The text color of unselected buttons when `variant` is `'contained'`.                 |
| selectedBgColor | `string`                                                       | `''`          | The background color of the selected button when `variant` is `'contained'`.          |
| fontSize        | `string \| number`                                             | `''`          | The font size of the buttons.                                                         |
| fontWeight      | `string \| number`                                             | `''`          | The font weight of the buttons.                                                       |
| btnStyle        | `SxProps`                                                      | `{}`          | Custom style object for individual buttons.                                           |
| rootstyle       | `SxProps`                                                      | `{}`          | Custom style object for the root container.                                           |
| btnGroupStyle   | `SxProps`                                                      | `{}`          | Custom style object for the MuiButtonGroup container.                                 |
| className       | `string`                                                       | `''`          | Additional CSS class name for the root container.                                     |
| sx              | `SxProps`                                                      | `{}`          | Custom style object using MUI's `sx` prop.                                            |

## ButtonItem

| Prop Name  | Type            | Default     | Description                                |
| ---------- | --------------- | ----------- | ------------------------------------------ |
| label      | `string`        | -           | The label text of the button.              |
| value      | `number`        | -           | The value associated with the button.      |
| startIcon  | `ReactNode`     | `undefined` | The start icon of the button (optional).   |
| endIcon    | `ReactNode`     | `undefined` | The end icon of the button (optional).     |
| isdisabled | `true \| false` | `undefined` | Whether the button is disabled (optional). |