Button Group

Introduction

Button groups arrange multiple buttons in a horizontal or vertical group.

Buttons inside a ButtonGroup can trivially be wrapped with a Popover to create complex toolbars.

The below information is a snippet from the

related section in the Blueprint reference documentation.

Examples

Edit code

Usage

1import React from "react";
2import {
3  Button,
4  ButtonGroup,
5  Popover,
6  Menu,
7  MenuItem,
8  MenuDivider
9} from "@commure/components-foundation";
10
11function MyButtonGroup() {
12  return (
13    <ButtonGroup>
14      <Popover
15        content={
16          <Menu>
17            <MenuItem text="New" icon="document" />
18            <MenuDivider />
19            <MenuItem text="Save" icon="floppy-disk" />
20          </Menu>
21        }
22        position="bottom"
23      >
24        <Button rightIcon="caret-down">Options</Button>
25      </Popover>
26      <Button icon="function">Functions</Button>
27      <Button icon="database">Queries</Button>
28    </ButtonGroup>
29  );
30}
31
32export default MyButtonGroup;

API Reference

ButtonGroup

Prop Name	Required?	Type	Description
alignText	false	Alignment	Text alignment within button. By default, icons and text will be centered within the button. Passing `"left"` or `"right"` will align the button text to that side and push `icon` and `rightIcon` to either edge. Passing `"center"` will center the text and icons together.
className	false	string	A space-delimited list of class names to pass along to a child element.
fill	false	boolean	Whether the button group should take up the full width of its container.
large	false	boolean	Whether the child buttons should appear with large styling.
minimal	false	boolean	Whether the child buttons should appear with minimal styling.
vertical	false	boolean	Whether the button group should appear with vertical styling.

Related Reading

Blueprint Reference

Design

Button

Popover

Menu