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.

Examples


Usage

import React from "react";
import { Button, ButtonGroup, Popover, Menu, MenuItem, MenuDivider } from "@commure/components-foundation";
function MyButtonGroup() {
return (
<ButtonGroup>
<Popover
content={
<Menu>
<MenuItem text="New" icon="document" />
<MenuDivider />
<MenuItem text="Save" icon="floppy-disk" />
</Menu>}
position="bottom">
<Button rightIcon="caret-down">Options</Button>
</Popover>
<Button icon="function">Functions</Button>
<Button icon="database">Queries</Button>
</ButtonGroup>
);
}
export default MyButtonGroup;

API Reference

ButtonGroup

Prop NameRequired?TypeDescription
alignTextfalseAlignmentText 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.
classNamefalsestringA space-delimited list of class names to pass along to a child element.
fillfalsebooleanWhether the button group should take up the full width of its container.
largefalsebooleanWhether the child buttons should appear with large styling.
minimalfalsebooleanWhether the child buttons should appear with minimal styling.
verticalfalsebooleanWhether the button group should appear with vertical styling.

Related Reading

Blueprint Reference
Design
Button
Popover
Menu