Question 1

What is a button group?

Accepted Answer

A row or column of related buttons joined into one control: the buttons share their inner borders and only the outer corners are rounded, so Copy, Paste and Cut read as one unit. Each example here is shadcn.io's Button Group with its Buttons, styled with Tailwind CSS, for React on Base UI, React Aria, Ark UI and Radix UI, and for Vue, Svelte and Solid on Ark UI.

Question 2

Are these button group examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution. Seeing the code and installing it takes a free shadcn.io account.

Question 3

How is this different from placing buttons next to each other?

Accepted Answer

Button Group joins them: it removes the doubled border between neighbors, squares the inner corners, and renders a `role="group"` you can name with `aria-label`. It also takes inputs, selects and `ButtonGroupText` and joins them the same way. Nested groups get a gap between them.

Question 4

Button Group, Toggle Group or Tabs: which one?

Accepted Answer

Button Group for actions, like Fork with a menu or Previous and Next. Toggle Group for a choice that stays pressed, like text alignment, with Arrow key movement built in. Tabs for switching which panel is shown. Several examples here keep a selection on plain buttons with `aria-pressed`; a Toggle Group does the same with less code.

Question 5

How do I build a split button?

Accepted Answer

Put the main Button and a second, icon-only Button that opens a Dropdown Menu in one group. Give the chevron an `aria-label`, such as More options. The Split Button with Dropdown and Overflow Menu examples show both forms.

Question 6

How do I show a count next to a button?

Accepted Answer

Put `ButtonGroupText` after the button with the number, as in Like with Count, or place a small round Badge on the button's corner, as in Cart Button and Notifications Button. Give icon-only buttons an `aria-label` that includes the count.

Question 7

How do I show which button is selected?

Accepted Answer

Keep the selected value yourself, give the matching button the `default` variant and the rest `outline` or `ghost`, and set `aria-pressed` so screen readers hear it. Button Group itself keeps no state. For page or step navigation, use `aria-current` instead.

Question 8

How do I install a button group example?

Accepted Answer

Sign in with a free account, open the example and run the install command it shows. It adds the example and the components it uses, Button Group, Button and any others, to your project, for your framework and UI library.

Question 9

How do I size the buttons in a group?

Accepted Answer

Button Group has no size prop. Set `size` on every Button in the group, such as `sm`, and use an icon size like `icon-sm` for icon-only buttons, so the row lines up.

Question 10

How do I stack a group vertically?

Accepted Answer

Set `orientation` to `vertical` on Button Group. The buttons stack, share their horizontal borders and round only the top and bottom corners.

Question 11

Which libraries do button group examples use?

Accepted Answer

shadcn.io's Button Group and Button (built on Base UI, React Aria, Ark UI or Radix UI in React, and on Ark UI in Vue, Svelte and Solid), Tailwind CSS and Lucide icons. Some examples add Badge, Kbd, Input, Select or Dropdown Menu.

Question 12

Are the button groups accessible?

Accepted Answer

Yes. The group renders `role="group"`, and every example names its groups with `aria-label`. Each button is a real button that Tab reaches and Enter or Space presses. Icon-only buttons have an `aria-label`, and selected buttons set `aria-pressed` or `aria-current`.

Question 13

Do the examples work in Vue, Svelte and Solid?

Accepted Answer

Yes, and they look the same on every target. Only the prop names differ where the libraries differ, such as `onPress` and `isDisabled` on React Aria, or how a menu trigger takes its button.

Button Group Examples

Bulk Actions

Comment Actions

File Operations

Social Actions

Rich Text Toolbar

Split Button with Dropdown

Button Group with Select

Stepper Button Group

Cart Button

Like with Count

Messages and Followers

Notifications Button

More component examples

Toggle

Toggle Group

Button

Calendar

Card

Carousel

Chart

Checkbox

Button Group examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every button group example. One prompt away.