Button Group

A button group joins related actions into one control. Its buttons share their inner borders and keep rounded corners only at the two ends of the group, so users see at a glance which actions belong together. Inputs, selects and text join the group in the same way.

UsageCopy Anchor Link

import { Button } from "@biem/ui/components/ui/button";
import { ButtonGroup } from "@biem/ui/components/ui/button-group";

export function ButtonGroupDefault() {
	return (
		<ButtonGroup>
			<Button variant="outline">Count stock</Button>
			<Button variant="outline">Adjust stock</Button>
			<Button variant="outline">Transfer stock</Button>
		</ButtonGroup>
	);
}

ExamplesCopy Anchor Link

HorizontalCopy Anchor Link

Actions that concern the same object usually sit side by side, such as everything users can do with one delivery. The group joins them in a row by default, so users read them as one set, and orientation set to "horizontal" states this explicitly.

VerticalCopy Anchor Link

Narrow areas such as a side panel leave no room for a row of actions. With orientation set to "vertical", the group stacks its children in a column and keeps them joined, so they still read as related actions.

NestedCopy Anchor Link

A toolbar often holds several sets of actions, each of which belongs together. Groups can therefore hold groups of their own: every inner group keeps its actions joined, while the outer group keeps the sets apart, so users see at once where one set ends and the next begins.

With InputCopy Anchor Link

Some actions need a value that users type first, such as a barcode to look up. An input joins the group the same way a button does, so the field and the action that uses its value form one control in which users enter and confirm.

With SelectCopy Anchor Link

Where an action depends on one choice from a fixed list, such as the period of a report, that choice belongs right beside it. Joined to the action, a select keeps choice and outcome in one control, so users never wonder which option the action will use.

With TextCopy Anchor Link

Users act with more confidence when they see the value an action concerns. Inside the group, ButtonGroupText holds such a value next to the action, so value and action read as one.

Text with IconCopy Anchor Link

Several groups on one screen can show values of different kinds. An icon inside the text marks the kind of value before users read it, while the words keep the meaning clear on their own.

Text as LabelCopy Anchor Link

A field sometimes needs its name right beside it rather than above it. Through render, the text becomes a real label for the field, so a click on it moves the focus into the field and assistive technology announces the field by that name.

Vertical SeparatorCopy Anchor Link

Buttons without a border of their own, such as those with variant set to "secondary", lose the boundary between their actions once they join. In a horizontal group, a separator with orientation set to "vertical", which is also its default, restores that boundary, so users tell the actions apart and assistive technology announces the division as well.

Horizontal SeparatorCopy Anchor Link

The same need arises in a vertical group. There, a separator with orientation set to "horizontal" divides the stacked actions, so each one keeps a clear boundary to the next.

API ReferenceCopy Anchor Link

ButtonGroupCopy Anchor Link

ButtonGroupTextCopy Anchor Link

ButtonGroupSeparatorCopy Anchor Link