MoleculeButtonGroup

MoleculeButtonGroup is a component that wraps a group of buttons, related in content.

Installation

$ npm install @s-ui/react-molecule-button-group --save

Usage

Having the proper elements imported

import MoleculeButtonGroup from '@s-ui/react-molecule-button-group'
import AtomButtom, { atomButtonGroupPositions } from '@s-ui/react-atom-button'

Basic usage

<MoleculeButtonGroup type="secondary">
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

<MoleculeButtonGroup type="tertiary" negative>
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

Full Width

<MoleculeButtonGroup type="secondary" fullWidth>
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

Specifying Group Positions Values

<MoleculeButtonGroup type="secondary" groupPositions={atomButtonGroupPositions} >
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

Find full description and more examples in the demo page.