Buttons
ButtonGroup
Storybook
ButtonGroup
Storybook
ButtonGroup is a component that groups multiple Button components together.
Imports
1import { ButtonGroup } from 'dd360-ds'1import { ButtonGroup } from 'dd360-ds/Buttons'1import ButtonGroup from 'dd360-ds/ButtonGroup'Usage
1import { Button, ButtonGroup } from 'dd360-ds'
2
3<ButtonGroup>
4 <Button>1st button</Button>
5 <Button>2nd button</Button>
6</ButtonGroup>Props
You can also customize the alignment, gap, and orientation of the buttons within the group using the props "orientation", "align", and "gap".
1import { Button, ButtonGroup } from 'dd360-ds'
2
3<ButtonGroup orientation='horizontal' align='start' gap={6}>
4 <Button variant='primary'>1st button</Button>
5 <Button variant='secondary'>2nd button</Button>
6 <Button variant='success'>3rd button</Button>
7</ButtonGroup>API Reference
| Name | Types | Default |
|---|---|---|
| "orientation" | vertical horizontal | vertical |
| "align" | start end center baseline stretch | start |
| "gap" | number | 6 |
| "className" | string | - |