shadcn.io is an independent project built on shadcn/ui
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 Svelte, Ark UI does not move focus with the arrow keys.
Installation
Anatomy
Usage
<div class="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.
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.
