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

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>
  );
};

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG