Code

Props - Single Selection

Props	Data Type	Required
children	Button Component	✅
className	string	❌

How It Works

Button Group Component works as a wrapper where developers can insert all the Button components required, changing their appearance to give them a more consistent composition. Beside that, Button Group Component has its own styles to work together the select prop of the Base Button Component.

This means, developers are going to be able to manage their states based on individual buttons events, having a simpler and a more complete control on the actions to be exectued.

Button Group Component styles only are optimized to work with the Button Component in its Base type, any other Button type is going to require custom css styles from the developers.

Example

import React from 'react';
import {Button, ButtonGroup} from '@2600hz/sds-react-components';

const Example = ()=>{
    const [selection, setSelection] = useState({
      button1: false,
      button2: false,
      button3: false
    });
  
    const updateSelection = (e: any) => {
      const selectedButton = e.target.getAttribute('custom-data');
  
      setSelection((prevState: any) => ({
        ...prevState,
        [selectedButton]: !prevState[selectedButton]
      }));
    };
  
    return (
      <ButtonGroup>
        <Button
          customData="button1"
          selected={selection.button1}
          onClick={updateSelection}
        >
          Button 1
        </Button>
        <Button
          customData="button2"
          selected={selection.button2}
          onClick={updateSelection}
        >
          Button 2
        </Button>
        <Button
          customData="button3"
          selected={selection.button3}
          onClick={updateSelection}
        >
          Button 3
        </Button>
      </ButtonGroup>
    );
}

Components Dependency

For this component elaboration there were used the following internal components:

• Button

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

Storybook