MoleculeButtonGroup
is a component that wraps a group of buttons, related in content.
$ npm install @s-ui/react-molecule-button-group --save
Having the proper elements imported
import MoleculeButtonGroup, {
moleculeButtonGroupSpaced
} from '@s-ui/react-molecule-button-group'
import AtomButtom, {atomButtonGroupPositions} from '@s-ui/react-atom-button'
<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>
<MoleculeButtonGroup type="secondary" fullWidth>
<AtomButtom>A</AtomButtom>
<AtomButtom>B</AtomButtom>
<AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>
<MoleculeButtonGroup type="secondary" groupPositions={atomButtonGroupPositions}>
<AtomButtom>A</AtomButtom>
<AtomButtom>B</AtomButtom>
<AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>
<MoleculeButtonGroup type="secondary" spaced={moleculeButtonGroupSpaced.LARGE}>
<AtomButtom>A</AtomButtom>
<AtomButtom>B</AtomButtom>
<AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>
<MoleculeButtonGroup type="secondary" isVertical>
<AtomButtom>A</AtomButtom>
<AtomButtom>B</AtomButtom>
<AtomButtom>C</AtomButtom>
</MoleculeButtonGroup>
Find full description and more examples in the demo page.