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, {
  moleculeButtonGroupSpaced
} 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>

Spaced

<MoleculeButtonGroup type="secondary" spaced={moleculeButtonGroupSpaced.LARGE}>
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

Vertical Layout

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

Shape

<MoleculeButtonGroup type="secondary" shape={moleculeButtonGroupShapes.CIRCULAR} spaced="xsmall">
  <AtomButtom>A</AtomButtom>
  <AtomButtom>B</AtomButtom>
  <AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>

Find full description and more examples in the demo page.