Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Vertical Button Group for React

Two vertical outline button groups: Top, Middle, and Bottom, then Option 1 through Option 4.

The same joined border, turned on its side. The first stack is Top, Middle, and Bottom. The second is Option 1 through Option 4, at the small size. Only the outer corners stay rounded. Arrow keys do not move through the stack, and the buttons do nothing.

Use a vertical group for a short list in a side panel. A choice that stays selected fits a Radio Group better. In React, Base UI does not move focus with the arrow keys.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex gap-4">
  <ButtonGroup aria-label="Position" orientation="vertical">
    <Button variant="outline">Top</Button>
    <Button variant="outline">Middle</Button>
    <Button variant="outline">Bottom</Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Options" orientation="vertical">
    <Button size="sm" variant="outline">
      Option 1
    </Button>
    <Button size="sm" variant="outline">
      Option 2
    </Button>
    <Button size="sm" variant="outline">
      Option 3
    </Button>
    <Button size="sm" variant="outline">
      Option 4
    </Button>
  </ButtonGroup>
</div>

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.

API Reference

Button Group

Sets aria-label="Position", orientation="vertical" and aria-label="Options". The rest is on the Button Group page.

Button

Sets variant="outline" and size="sm". The rest is on the Button page.

All 39 button group examples