Button Group

yarn add @clayui/button

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.

React Component
CSS / Markup

Stable 3.3.1 View in Lexicon CHANGELOG

Group
API
- ClayButton.Group

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 ClayButton from '@clayui/button';

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	false		Flag to indicate the spacing between the buttons.
role		false	'group'

Examples
Split Button
Button toolbar
Sizes
Vertical variation

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>