shadcn.io is an independent project built on shadcn/ui
Groups inside a group. The first row joins Bold with Italic, leaves a gap, then joins Underline with Strike. The second joins Left, Center, and Right, then leaves a gap before Justify alone. Inner groups keep their shared borders. The buttons do nothing.
Use nesting when a toolbar has clusters rather than one long strip. If the styles should stay on, use a Toggle Group. In Svelte, Ark UI does not treat the clusters as one selection.
Installation
Anatomy
Usage
<div class="flex flex-col gap-4"><ButtonGroup aria-label="Text style"><ButtonGroup><Button variant="outline">Bold</Button><Button variant="outline">Italic</Button></ButtonGroup><ButtonGroup><Button variant="outline">Underline</Button><Button variant="outline">Strike</Button></ButtonGroup></ButtonGroup><ButtonGroup aria-label="Alignment"><ButtonGroup><Button size="sm" variant="outline">Left</Button><Button size="sm" variant="outline">Center</Button><Button size="sm" variant="outline">Right</Button></ButtonGroup><ButtonGroup><Button size="sm" variant="outline">Justify</Button></ButtonGroup></ButtonGroup></div>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.
API Reference
Button Group
Sets aria-label="Text style" and aria-label="Alignment". The rest is on the Button Group page.
Button
Sets variant="outline" and size="sm". The rest is on the Button page.
