Button Group

yarn add @clayui/button

React Component
CSS / Markup

Stable3.0.2

Button groups are used to switch between complementary views for example, but they must never be used for complementary actions, "Change and Cancel" actions, or "Save and Cancel" actions. In those cases, single buttons are the correct solution.

Group
API
- ClayButton.Group

Take a look at our Storybook for more information about this component.

Check the Lexicon Button Pattern for a more in-depth look at the motivations and proper usage of this component.

Group

You can use the variant ClayButton.Group for creating button groups:

Use spaced property to create spacing between buttons.

import ClayButton from '@clayui/button';
import React from 'react';

import ClayButton from '@clayui/button';
import React from 'react';

const Component = () => {
  return (
    <ClayButton.Group>
      <ClayButton>{"This"}</ClayButton>
      <ClayButton displayType="secondary">{"is"}</ClayButton>
      <ClayButton>{"a"}</ClayButton>
      <ClayButton displayType="secondary">{"button"}</ClayButton>
      <ClayButton>{"group."}</ClayButton>
    </ClayButton.Group>
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayButton.Group>
      <ClayButton>{"This"}</ClayButton>
      <ClayButton displayType="secondary">{"is"}</ClayButton>
      <ClayButton>{"a"}</ClayButton>
      <ClayButton displayType="secondary">{"button"}</ClayButton>
      <ClayButton>{"group."}</ClayButton>
    </ClayButton.Group>
  );
};
render(<Component />);

API

ClayButton.Group

Property	Type	Required	Default	Description
spaced	boolean			Flag to indicate the spacing between the buttons.
role			'group'

Examples
Split Button
Button toolbar
Sizes
Vertical variation

Check the Lexicon Buttons Pattern for a more in-depth look at the motivations and proper usage of this component.

Examples

<div class="btn-group" role="group">
	<button class="btn btn-secondary" type="button">Day</button>
	<button class="active btn btn-secondary" type="button">Month</button>
	<button class="btn btn-secondary" type="button">Year</button>
</div>

Split Button

<div class="btn-group dropdown" role="group">
	<button class="btn btn-primary" type="button">Primary</button>
	<button
		aria-expanded="false"
		aria-haspopup="true"
		class="btn btn-primary btn-monospaced dropdown-toggle"
		data-toggle="dropdown"
		type="button"
	>
		<svg
			class="lexicon-icon lexicon-icon-caret-bottom"
			focusable="false"
			role="presentation"
		>
			<use href="/images/icons/icons.svg#caret-bottom" />
		</svg>
	</button>
</div>

Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.

<div aria-label="Toolbar with button groups" class="btn-toolbar" role="toolbar">
	<div aria-label="First group" class="btn-group" role="group">
		<button type="button" class="btn btn-secondary">1</button>
		<button type="button" class="btn btn-secondary">2</button>
		<button type="button" class="btn btn-secondary">3</button>
		<button type="button" class="btn btn-secondary">4</button>
	</div>
	<div aria-label="Second group" class="btn-group" role="group">
		<button type="button" class="btn btn-secondary">5</button>
		<button type="button" class="btn btn-secondary">6</button>
		<button type="button" class="btn btn-secondary">7</button>
	</div>
	<div aria-label="Third group" class="btn-group" role="group">
		<button type="button" class="btn btn-secondary">8</button>
	</div>
	<div class="input-group">
		<div
			class="input-group-item input-group-item-shrink input-group-prepend"
		>
			<span class="input-group-text">@</span>
		</div>
		<div class="input-group-item input-group-append">
			<input
				aria-label="Input group example"
				aria-describedby="btnGroupAddon"
				class="form-control"
				placeholder="Input group example"
				type="text"
			/>
		</div>
	</div>
</div>

Sizes

Instead of applying button sizing classes to every button in a group, just add .btn-group-* to each .btn-group, including each one when nesting multiple groups.

<div class="btn-group btn-group-sm" role="group">
	...
</div>
<div class="btn-group" role="group">
	...
</div>
<div class="btn-group btn-group-lg" role="group">
	...
</div>

Vertical variation

<div class="btn-group-vertical" role="group">
	...
</div>