Shadcn Button Group Examples: Segmented Controls and Toolbars for React
A button group is a container that joins related buttons into one visual unit with shared borders and consistent radius. The shadcn button group component handles the edge rounding, border collapsing, and focus order for you, so building a react segmented control or a toolbar with Tailwind CSS takes a few lines instead of a pile of first and last child selectors.
This page gathers 20 button group examples, from Button Group 1 through Button Group 20, spanning pagination-style prev and next pairs, split buttons with dropdown triggers, input and select combinations, vertical stacks, and toolbar rows. Each example is TypeScript-first and pastes cleanly into a Next.js app.
Key capabilities
- Automatic edge handling: First and last children get correct rounding while inner borders collapse into a single divider.
- Horizontal and vertical orientation: An orientation prop switches the group between a toolbar row and a stacked control.
- Mixed child types: Buttons, inputs, selects, and dropdown triggers can share one group and remain aligned.
- Separator support: A ButtonGroupSeparator adds a visible divider where two attached buttons need stronger distinction.
- Nested groups: Groups can be composed side by side with a small gap to build multi-section toolbars.
Best practices
- Group only related actions: Attach buttons that operate on the same object, such as zoom in and zoom out, not unrelated commands.
- Keep one primary action: In a split button, give the main action the default variant and the chevron trigger the same variant to read as one control.
- Prefer outline for toolbars: Outline buttons make the shared borders visible, which is what defines the grouped appearance.
- Mind keyboard order: Children remain individual tab stops, so order them left to right in the sequence users expect.
- Limit group size: Beyond five or six segments a dropdown or tabs component communicates options better.
Where button groups shine
Editor toolbars are the classic case: bold, italic, and underline sit in one group, alignment controls in the next. Data views use a button group to switch between grid and list layouts, and numeric steppers pair a decrement and increment button around a value. Split buttons that combine a primary action with a dropdown menu of secondary actions are another pattern covered by several examples here.
Search bars also benefit. Attaching an input to a submit button, or a select for scope to a search field, produces the compact single-row controls you see across admin headers in our blocks collection.
Combining with neighboring components
When segments represent an exclusive choice with pressed state, a toggle group is the semantically correct sibling, since the button group itself carries no selection state. For paged navigation, the pagination component builds on the same attached-button look with proper aria labels.
Under the hood
The button group is a styling wrapper, not a primitive. It renders a div with role=group and uses Tailwind CSS selectors to collapse borders between children, as described in the shadcn/ui button group docs. Because there is no behavioral dependency, these button group examples run unchanged whether the rest of your project uses Radix UI or Base UI components.