Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

button-group

v1.9.0arrow_drop_down
v1.9.0
v1.7.0
v1.6.1
v1.4.0
STATUS
Passing
DOWNLOADS
20
VISIBILITY
Public
PUBLISHED
2 weeks ago
SIZE
18 KB
Button groups are used to bunch together buttons with similar actions
1 contributor
Use button-group in your project ?
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
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
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
NameTypeDefault valueDescription
children
node[] | objectnull

The content of the ButtonGroup. Accepted childrens include Button, ButtonIcon and ButtonMenu.

className
stringundefined

A CSS class for the outer element, in addition to the component’s base classes.

style
objectundefined

An object with custom style applied to the outer element.