Button group
A container that groups related buttons together with consistent styling.
Usage
The ButtonGroup component groups related buttons together with consistent styling. It supports both horizontal and vertical orientations.
Base
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline"> Button 1 </twig:ui:Button> <twig:ui:Button variant="outline"> Button 2 </twig:ui:Button> <twig:ui:Button variant="outline"> Button 3 </twig:ui:Button> </twig:ui:ButtonGroup> </div>
Orientation
<twig:ui:ButtonGroup orientation="vertical"> <twig:ui:Button variant="outline"> Top </twig:ui:Button> <twig:ui:Button variant="outline"> Middle </twig:ui:Button> <twig:ui:Button variant="outline"> Bottom </twig:ui:Button> </twig:ui:ButtonGroup>
Size
<div class="flex flex-col items-center justify-center gap-4 p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline" size="sm"> Small </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> Button </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> Group </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> <twig:ux:icon name="lucide:plus" /> </twig:ui:Button> </twig:ui:ButtonGroup> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline" size="md"> Default </twig:ui:Button> <twig:ui:Button variant="outline" size="md"> Button </twig:ui:Button> <twig:ui:Button variant="outline" size="md"> Group </twig:ui:Button> <twig:ui:Button variant="outline" size="md"> <twig:ux:icon name="lucide:plus" /> </twig:ui:Button> </twig:ui:ButtonGroup> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline" size="lg"> Large </twig:ui:Button> <twig:ui:Button variant="outline" size="lg"> Button </twig:ui:Button> <twig:ui:Button variant="outline" size="lg"> Group </twig:ui:Button> <twig:ui:Button variant="outline" size="lg"> <twig:ux:icon name="lucide:plus" /> </twig:ui:Button> </twig:ui:ButtonGroup> </div>
Nested
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline" size="sm"> 1 </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> 2 </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> 3 </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> 4 </twig:ui:Button> <twig:ui:Button variant="outline" size="sm"> 5 </twig:ui:Button> </twig:ui:ButtonGroup> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline" size="icon-sm" aria-label="Previous"> <twig:ux:icon name="lucide:arrow-left" /> </twig:ui:Button> <twig:ui:Button variant="outline" size="icon-sm" aria-label="Next"> <twig:ux:icon name="lucide:arrow-right" /> </twig:ui:Button> </twig:ui:ButtonGroup> </twig:ui:ButtonGroup> </div>
Separator
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="secondary"> Copy </twig:ui:Button> <twig:ui:ButtonGroup:Separator/> <twig:ui:Button variant="secondary"> Paste </twig:ui:Button> </twig:ui:ButtonGroup> </div>
Split
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="secondary"> Save Changes </twig:ui:Button> <twig:ui:ButtonGroup:Separator/> <twig:ui:Button variant="secondary" size="icon"> <twig:ux:icon name="lucide:plus" /> </twig:ui:Button> </twig:ui:ButtonGroup> </div>
Dropdown Menu
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline"> Follow </twig:ui:Button> <twig:ui:Button variant="outline" popovertarget="actions-dropdown" class="!pl-2"> <twig:ux:icon name="lucide:chevron-down" /> </twig:ui:Button> </twig:ui:ButtonGroup> </div> <twig:ui:DropdownMenu id="actions-dropdown" position="bottom-end"> <twig:ui:DropdownMenu:Content> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:volume-off" /> <span>Mute Conversation</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:check" /> <span>Mark as Read</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:alert-triangle" /> <span>Report Conversation</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:user-round-x" /> <span>Block User</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:share" /> <span>Share Conversation</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Item> <twig:ux:icon name="lucide:copy" /> <span>Copy Conversation</span> </twig:ui:DropdownMenu:Item> <twig:ui:DropdownMenu:Separator/> <twig:ui:DropdownMenu:Item variant="destructive"> <twig:ux:icon name="lucide:trash" /> <span>Delete Conversation</span> </twig:ui:DropdownMenu:Item> </twig:ui:DropdownMenu:Content> </twig:ui:DropdownMenu>
Popover
<div class="flex items-center justify-center p-8"> <twig:ui:ButtonGroup> <twig:ui:Button variant="outline"> <twig:ux:icon name="lucide:bot" /> Copilot </twig:ui:Button> <twig:ui:Button variant="outline" size="icon" popovertarget="copilot-popover" aria-label="Open Popover"> <twig:ux:icon name="lucide:chevron-down" /> </twig:ui:Button> </twig:ui:ButtonGroup> </div> <twig:ui:Popover id="copilot-popover" position="bottom-end"> <twig:ui:Popover:Content class="w-72 rounded-xl p-0 text-sm"> <div class="px-4 py-3"> <div class="text-sm font-medium">Agent Tasks</div> </div> <twig:ui:Separator/> <div class="p-4 text-sm [&_p:not(:last-child)]:mb-2"> <p class="font-medium">Start a new task with Copilot</p> <p class="text-muted-foreground"> Describe your task in natural language. Copilot will work in the background and open a pull request for your review. </p> </div> </twig:ui:Popover:Content> </twig:ui:Popover>