@paprika/button-group
v1.1.0
Published
ButtonGroup component is a segmented group of toggle buttons.
Readme
@paprika/button-group
Description
ButtonGroup component is a segmented group of toggle buttons.
Installation
yarn add @paprika/button-groupor with npm:
npm install @paprika/button-groupProps
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.|
Usage
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>
);
};