button-group
v1.10.0arrow_drop_downv1.10.0
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
258
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
18 KB
Button groups are used to bunch together buttons with similar actions
1 contributor
Like
Install button-group as a package?
Copied
npm i @bit/nexxtway.react-rainbow.button-group
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example 
modifieddraft
modifieddraft
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout



modifieddraft
chevron_left
chevron_right
button group
import React from 'react';
import { ButtonGroup, Button } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
<ButtonGroup className="rainbow-m-around_medium">
<Button label="Refresh" variant="neutral" />
<Button label="Edit" variant="neutral" />
<Button label="Save" variant="neutral" />
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<Button label="Refresh" variant="outline-brand" />
<Button label="Edit" variant="outline-brand" />
<Button label="Save" variant="outline-brand" />
</ButtonGroup>
</div>
button group with overflow menu icon
import React from 'react';
import { ButtonGroup, Button, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-m-horizontal_medium">
<ButtonGroup>
<Button label="Refresh" variant="neutral" />
<Button label="Edit" variant="neutral" />
<Button label="Save" variant="neutral" />
<ButtonMenu
menuAlignment="right"
menuSize="x-small"
icon={<FontAwesomeIcon icon={faAngleDown} className="rainbow-color_brand" />}
>
<MenuItem label="Menu Item One" />
<MenuItem label="Menu Item Two" />
<MenuItem label="Menu Item Three" />
</ButtonMenu>
</ButtonGroup>
</div>
button group with icon
import React from 'react';
import { ButtonGroup, Button, ButtonIcon, ButtonMenu, MenuItem } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faPencilAlt, faPaste, faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
<ButtonGroup className="rainbow-m-around_medium">
<Button variant="neutral">
<FontAwesomeIcon icon={faPlus} className="rainbow-m-right_small" />
Add
</Button>
<Button variant="neutral">
<FontAwesomeIcon icon={faPencilAlt} className="rainbow-m-right_small" />
Edit
</Button>
<Button variant="neutral">
<FontAwesomeIcon icon={faPaste} className="rainbow-m-right_small" />
Paste
</Button>
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faPlus} />} />
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faPaste} />} />
<ButtonMenu
menuAlignment="right"
menuSize="x-small"
icon={<FontAwesomeIcon icon={faAngleDown} />}
>
<MenuItem label="Menu Item One" />
<MenuItem label="Menu Item Two" />
<MenuItem label="Menu Item Three" />
</ButtonMenu>
</ButtonGroup>
</div>
button group with button disabled
import React from 'react';
import { ButtonGroup, Button, ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faPencilAlt, faPaste, faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
<ButtonGroup className="rainbow-m-around_medium">
<Button label="Refresh" variant="neutral" />
<Button label="Edit" variant="neutral" />
<Button label="Save" variant="neutral" disabled />
<ButtonIcon
variant="border-filled"
disabled
icon={<FontAwesomeIcon icon={faAngleDown} />}
/>
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<Button variant="neutral">
<FontAwesomeIcon icon={faPlus} className="rainbow-m-right_small" />
Add
</Button>
<Button variant="neutral" disabled>
<FontAwesomeIcon icon={faPencilAlt} className="rainbow-m-right_small" />
Edit
</Button>
<Button variant="neutral" disabled>
<FontAwesomeIcon icon={faPaste} className="rainbow-m-right_small" />
Paste
</Button>
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faPlus} />} />
<ButtonIcon variant="border-filled" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
<ButtonIcon variant="border-filled" disabled icon={<FontAwesomeIcon icon={faPaste} />} />
<ButtonIcon
variant="border-filled"
disabled
icon={<FontAwesomeIcon icon={faAngleDown} />}
/>
</ButtonGroup>
</div>
buttons group with button inverse
import React from 'react';
import { ButtonGroup, Button, ButtonIcon } from 'react-rainbow-components';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faPencilAlt, faPaste, faAngleDown } from '@fortawesome/free-solid-svg-icons';
<div className="rainbow-border-radius_oval rainbow-background-color_dark-1 rainbow-p-vertical_large rainbow-align-content_center rainbow-flex_wrap">
<ButtonGroup className="rainbow-m-around_medium">
<Button label="Refresh" variant="border-inverse" />
<Button label="Edit" variant="border-inverse" />
<Button label="Save" variant="border-inverse" />
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faAngleDown} />} />
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<Button variant="border-inverse">
<FontAwesomeIcon icon={faPlus} className="rainbow-m-right_small" />
Add
</Button>
<Button variant="border-inverse">
<FontAwesomeIcon icon={faPencilAlt} className="rainbow-m-right_small" />
Edit
</Button>
<Button variant="border-inverse">
<FontAwesomeIcon icon={faPaste} className="rainbow-m-right_small" />
Paste
</Button>
</ButtonGroup>
<ButtonGroup className="rainbow-m-around_medium">
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faPlus} />} />
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faPencilAlt} />} />
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faPaste} />} />
<ButtonIcon variant="border-inverse" icon={<FontAwesomeIcon icon={faAngleDown} />} />
</ButtonGroup>
</div>
Properties
Name | Type | Default value | Description |
---|---|---|---|
children | node[] | object | null | The content of the ButtonGroup. Accepted childrens include Button, ButtonIcon and ButtonMenu. |
className | string | undefined | A CSS class for the outer element, in addition to the component’s base classes. |
style | object | undefined | An object with custom style applied to the outer element. |