button-group

v1.10.0

v1.9.0

v1.7.0

v1.6.1

v1.4.0

STATUS

Passing

DOWNLOADS

VISIBILITY

Public

PUBLISHED

3 months ago

SIZE

18 KB

Button groups are used to bunch together buttons with similar actions

1 contributor

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

React

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

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.