@paprika/button-group

@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