Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Standard

Basic Button Group for React

Three rows of outline buttons joined into groups, one at the default size, one small and one large.

Framework
UI library

The starting point for every group in this gallery: outline buttons placed inside a ButtonGroup share their inner borders and lose their inner corners, so Left, Middle and Right read as one control. The three rows show the same join at the default, sm and lg button sizes.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How do I set the size of the buttons in the group?

ButtonGroup has no size prop. Set size on every Button. This demo leaves Left, Middle and Right at the default size, sets sm on Small and Group, and sets lg on Large and Group.

Which variant are these buttons?

Every button sets variant to outline. Use the same variant across a group so the shared border lines up. None of these buttons run an action.

Why are there three groups?

Each ButtonGroup is one size sample. They sit in a column with gap-4, so each row keeps its own border. Each group also has an aria-label, so a screen reader names the group it enters.

How do I lay these buttons out in a column?

Set orientation to vertical on ButtonGroup. This demo omits it, so the groups stay horizontal. The root sets data-orientation to the value you pass.

Do the arrow keys move between Left, Middle and Right?

No. Tab moves from button to button, and Enter or Space activates the focused button. The group does not handle Arrow keys, Home or End.

Can one button stay selected?

ButtonGroup renders role="group" and does not store a pressed value. A choice that stays pressed is a Toggle Group, or buttons you switch yourself, as in the Segmented Control example.

All 39 button group examples