@licuido-ui/ui_button-group NPM

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

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

buttonGroup

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

@emotion/react @emotion/styled @mui/material react react-dom

@licuido-ui/react

0.0.2

8 months ago