Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Standard

Vertical Button Group for React

Two vertical button groups that stack outline buttons from top to bottom with shared borders.

Framework
UI library

The same join as a horizontal group, turned on its side. orientation="vertical" stacks the buttons, rounds only the top and bottom corners, and shares the border between each pair. Use it for a short list of options in a narrow column or a side panel.

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 stack the buttons?

Set orientation to vertical on ButtonGroup. The group switches to a column and rounds the top and bottom of the stack instead of the left and right ends.

What do the two groups show?

Top, Middle and Bottom at the default size, and Option 1 to Option 4 with size set to sm. They sit side by side with gap-4.

Why are the buttons in a column the same width?

The group stretches its children, so each button fills the column's width. The widest label sets it.

Do the options do anything?

No. They are static labels. Add a click handler on each Button, or switch the variant of the chosen one to show a selection.

Do Up and Down arrows move through the stack?

No. Tab moves through the buttons in order, and Enter or Space activates the focused one. The group does not handle Arrow keys.

How is each stack named?

Each ButtonGroup has an aria-label, Position and Options, which a screen reader reads with role="group" when focus enters it.

All 39 button group examples