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 [email protected]

Link

Story Book Link ButtonGroup

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_button-group

Import component

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

Usage

<ButtonGroup buttons={[]} />

Image

Sample Code

<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). |