Skip to main content

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.