2.15.0 • Published 11 days ago
@s-ui/react-molecule-button-group v2.15.0
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>
Find full description and more examples in the demo page.
2.15.0
11 days ago
2.13.0
8 months ago
2.11.0
8 months ago
2.12.0
8 months ago
2.10.0
2 years ago
2.9.0
2 years ago
2.8.0
2 years ago
2.5.0
2 years ago
2.7.0
2 years ago
2.6.0
2 years ago
2.4.0
2 years ago
2.3.0
3 years ago
2.2.0
4 years ago
2.1.0
4 years ago
2.0.0
5 years ago
1.5.0
6 years ago
1.4.0
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago