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.

Stable 3.4.0 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.

Code Sample (expand to see it)

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

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

<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.

Code Sample (expand to see it)

<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.

Code Sample (expand to see it)

<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

Code Sample (expand to see it)

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