shadcn.io is not affiliated with official shadcn/ui
Button Group examples · Standard
Nested Button Groups for React
Button groups nested inside a parent group, so related clusters such as Bold and Italic sit side by side with a gap between them.
A toolbar often has clusters inside it. Put a ButtonGroup inside another ButtonGroup and each inner group keeps its joined border, while the outer group spaces the clusters apart. The first row splits text styles into two pairs; the second puts Left, Center and Right in one cluster and Justify in another.
Preview
Installation
FAQ
How do I nest button groups?
Put a ButtonGroup inside another ButtonGroup. The first row nests Bold and Italic in one group, and Underline and Strike in another. Each pair keeps its own shared border.
What does the second row show?
Left, Center and Right share one inner group with size set to sm. Justify sits alone in the next inner group. Every button sets variant to outline.
Where does the space between clusters come from?
From ButtonGroup itself. A group whose children are button groups adds a gap between them, so this file passes no gap class.
How do I draw a line between buttons in one group?
Put ButtonGroupSeparator between the buttons. Its orientation defaults to vertical, which is the divider for a horizontal row. This demo nests groups instead, so the clusters sit apart.
Do Bold and Italic do anything on click?
No. Every button in this file is a static label. Add a click handler on the Button you want to run, or see the Rich Text Toolbar for buttons that toggle.
Related
- Basic Button GroupThree rows of outline buttons joined into
- Button Group VariantsTwo outline button groups of editing
- Rich Text Toolbar Button GroupA rich text toolbar of icon buttons where
- File Operations Button GroupDownload, Share, Edit and Delete in one
- Button with Text (Outline)A border, no fill
- Vertical Button GroupTwo vertical button groups that stack