package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/dropdownmenu" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/utils") templ ButtonGroupDemo() { @buttongroup.ButtonGroup() { @buttongroup.ButtonGroup(buttongroup.Props{Class: "hidden sm:flex"}) { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, Attributes: templ.Attributes{"aria-label": "Go Back"}, }) { @icon.ArrowLeft() } } @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantOutline}) { Archive } @button.Button(button.Props{Variant: button.VariantOutline}) { Report } } @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantOutline}) { Snooze } @dropdownmenu.DropdownMenu() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, Attributes: utils.MergeAttributes(dropdownmenu.Trigger(ctx), templ.Attributes{"aria-label": "More Options"}), }) { @icon.Ellipsis() } @dropdownmenu.Content(dropdownmenu.ContentProps{ Align: dropdownmenu.AlignEnd, Class: "w-40", }) { @dropdownmenu.Group() { @dropdownmenu.Item() { @icon.MailCheck() Mark as Read } @dropdownmenu.Item() { @icon.Archive() Archive } } @dropdownmenu.Separator() @dropdownmenu.Group() { @dropdownmenu.Item() { @icon.Clock() Snooze } @dropdownmenu.Item() { @icon.CalendarPlus() Add to Calendar } @dropdownmenu.Item() { @icon.ListFilter() Add to List } @dropdownmenu.Sub() { @dropdownmenu.SubTrigger() { @icon.Tag() Label As... } @dropdownmenu.SubContent() { @dropdownmenu.RadioGroup() { @dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{ Value: "personal", Checked: true, }) { Personal } @dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "work"}) { Work } @dropdownmenu.RadioItem(dropdownmenu.RadioItemProps{Value: "other"}) { Other } } } } } @dropdownmenu.Separator() @dropdownmenu.Group() { @dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) { @icon.Trash2() Trash } } } } } }}Installation
Usage
Composition
Use the following composition to build a ButtonGroup:
Accessibility
- The
ButtonGroupcomponent has theroleattribute set togroup. - Use
Tabto navigate between the buttons in the group. - Use
aria-labeloraria-labelledbyto label the button group.
ButtonGroup vs ToggleGroup
- Use the
ButtonGroupcomponent when you want to group buttons that perform an action. - Use the
ToggleGroupcomponent when you want to group buttons that toggle a state.
Orientation
Set the Orientation prop to change the button group layout.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon") templ ButtonGroupOrientation() { @buttongroup.ButtonGroup(buttongroup.Props{ Orientation: buttongroup.OrientationVertical, Class: "h-fit", Attributes: templ.Attributes{"aria-label": "Media controls"}, }) { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, }) { @icon.Plus() } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, }) { @icon.Minus() } }}Size
Control the size of buttons using the Size prop on individual buttons.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon") templ ButtonGroupSize() { <div class="flex flex-col items-start gap-8"> @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeSm, }) { Small } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeSm, }) { Button } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeSm, }) { Group } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIconSm, }) { @icon.Plus() } } @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantOutline}) { Default } @button.Button(button.Props{Variant: button.VariantOutline}) { Button } @button.Button(button.Props{Variant: button.VariantOutline}) { Group } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, }) { @icon.Plus() } } @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeLg, }) { Large } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeLg, }) { Button } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeLg, }) { Group } @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIconLg, }) { @icon.Plus() } } </div>}Nested
Nest ButtonGroup components to create button groups with spacing.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/components/inputgroup" "github.com/axadrn/shadcn-templ/v2/components/tooltip") templ ButtonGroupNested() { @buttongroup.ButtonGroup() { @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, }) { @icon.Plus() } } @buttongroup.ButtonGroup() { @inputgroup.InputGroup() { @inputgroup.Input(inputgroup.InputProps{Placeholder: "Send a message..."}) @tooltip.Tooltip() { @inputgroup.Addon(inputgroup.AddonProps{ Align: inputgroup.AlignInlineEnd, Attributes: tooltip.Trigger(ctx), }) { @icon.AudioLines() } @tooltip.Content() { Voice Mode } } } } }}Separator
The buttongroup.Separator component visually divides buttons within a group.
Buttons with variant outline do not need a separator since they have a border. For other variants, a separator is recommended to improve the visual hierarchy.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup") templ ButtonGroupSeparatorExample() { @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantSecondary, Size: button.SizeSm, }) { Copy } @buttongroup.Separator() @button.Button(button.Props{ Variant: button.VariantSecondary, Size: button.SizeSm, }) { Paste } }}Split
Create a split button group by adding two buttons separated by a buttongroup.Separator.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon") templ ButtonGroupSplit() { @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantSecondary}) { Button } @buttongroup.Separator() @button.Button(button.Props{ Variant: button.VariantSecondary, Size: button.SizeIcon, }) { @icon.Plus() } }}Input
Wrap an Input component with buttons.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/components/input") templ ButtonGroupInput() { @buttongroup.ButtonGroup() { @input.Input(input.Props{Placeholder: "Search..."}) @button.Button(button.Props{ Variant: button.VariantOutline, Attributes: templ.Attributes{"aria-label": "Search"}, }) { @icon.Search() } }}Input Group
Wrap an InputGroup component to create complex input layouts.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/components/inputgroup" "github.com/axadrn/shadcn-templ/v2/components/tooltip" "github.com/axadrn/shadcn-templ/v2/utils") templ ButtonGroupInputGroup() { @buttongroup.ButtonGroup(buttongroup.Props{Class: "[--radius:9999rem]"}) { @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, }) { @icon.Plus() } } @buttongroup.ButtonGroup() { @inputgroup.InputGroup() { @inputgroup.Input(inputgroup.InputProps{Placeholder: "Send a message..."}) @inputgroup.Addon(inputgroup.AddonProps{Align: inputgroup.AlignInlineEnd}) { @tooltip.Tooltip() { @inputgroup.Button(inputgroup.ButtonProps{ Attributes: utils.MergeAttributes(tooltip.Trigger(ctx), templ.Attributes{"aria-label": "Voice Mode"}), }) { @icon.AudioLines() } @tooltip.Content() { Voice Mode } } } } } }}Dropdown Menu
Create a split button group with a DropdownMenu component.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/dropdownmenu" "github.com/axadrn/shadcn-templ/v2/components/icon") templ ButtonGroupDropdown() { @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantOutline}) { Follow } @dropdownmenu.DropdownMenu() { @button.Button(button.Props{ Variant: button.VariantOutline, Class: "pl-2!", Attributes: dropdownmenu.Trigger(ctx), }) { @icon.ChevronDown() } @dropdownmenu.Content(dropdownmenu.ContentProps{ Align: dropdownmenu.AlignEnd, Class: "w-44", }) { @dropdownmenu.Group() { @dropdownmenu.Item() { @icon.VolumeOff() Mute Conversation } @dropdownmenu.Item() { @icon.Check() Mark as Read } @dropdownmenu.Item() { @icon.TriangleAlert() Report Conversation } @dropdownmenu.Item() { @icon.UserRoundX() Block User } @dropdownmenu.Item() { @icon.Share() Share Conversation } @dropdownmenu.Item() { @icon.Copy() Copy Conversation } } @dropdownmenu.Separator() @dropdownmenu.Group() { @dropdownmenu.Item(dropdownmenu.ItemProps{Variant: dropdownmenu.ItemVariantDestructive}) { @icon.Trash2() Delete Conversation } } } } }}Select
Pair with a Select component.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/components/input" selectcomp "github.com/axadrn/shadcn-templ/v2/components/select") templ ButtonGroupSelect() { @buttongroup.ButtonGroup() { @buttongroup.ButtonGroup() { @selectcomp.Select() { @selectcomp.Trigger(selectcomp.TriggerProps{Class: "font-mono"}) { @selectcomp.Value(selectcomp.ValueProps{Placeholder: "$"}) } @selectcomp.Content(selectcomp.ContentProps{DisableAlignItemWithTrigger: true, Align: selectcomp.AlignStart}) { @selectcomp.Group() { @selectcomp.Item(selectcomp.ItemProps{ Value: "$", Label: "$", Selected: true, }) { $ <span class="text-muted-foreground">US Dollar</span> } @selectcomp.Item(selectcomp.ItemProps{Value: "€", Label: "€"}) { € <span class="text-muted-foreground">Euro</span> } @selectcomp.Item(selectcomp.ItemProps{Value: "£", Label: "£"}) { £ <span class="text-muted-foreground">British Pound</span> } } } } @input.Input(input.Props{Placeholder: "10.00"}) } @buttongroup.ButtonGroup() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, Attributes: templ.Attributes{"aria-label": "Send"}, }) { @icon.ArrowRight() } } }}Popover
Use with a Popover component.
package examples import (package examples import ( "github.com/axadrn/shadcn-templ/v2/components/button" "github.com/axadrn/shadcn-templ/v2/components/buttongroup" "github.com/axadrn/shadcn-templ/v2/components/field" "github.com/axadrn/shadcn-templ/v2/components/icon" "github.com/axadrn/shadcn-templ/v2/components/popover" "github.com/axadrn/shadcn-templ/v2/components/textarea" "github.com/axadrn/shadcn-templ/v2/utils") templ ButtonGroupPopover() { @buttongroup.ButtonGroup() { @button.Button(button.Props{Variant: button.VariantOutline}) { @icon.Bot() Copilot } @popover.Popover() { @button.Button(button.Props{ Variant: button.VariantOutline, Size: button.SizeIcon, Attributes: utils.MergeAttributes(popover.Trigger(ctx), templ.Attributes{"aria-label": "Open Popover"}), }) { @icon.ChevronDown() } @popover.Content(popover.ContentProps{ Align: popover.AlignEnd, Class: "rounded-xl text-sm", }) { @popover.Header() { @popover.Title() { Start a new task with Copilot } @popover.Description() { Describe your task in natural language. } } @field.Field() { @field.Label(field.LabelProps{For: "task", Class: "sr-only"}) { Task Description } @textarea.Textarea(textarea.Props{ ID: "task", Placeholder: "I need to...", Class: "resize-none", }) @field.Description() { Copilot will open a pull request for review. } } } } }}API Reference
ButtonGroup
The ButtonGroup component is a container that groups related buttons together with consistent styling.
Nest multiple button groups to create complex layouts with spacing. See the nested example for more details.
Separator
The buttongroup.Separator component visually divides buttons within a group.
Text
Use the buttongroup.Text component to display text within a button group.
Render a label.Label inside it to label an adjacent input.