---
title: Button Group
description: A container that groups related buttons together with consistent styling.
---

```templ
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

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add button-group
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="button-group" title="components/buttongroup/buttongroup.templ" />

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go
import "github.com/axadrn/shadcn-templ/v2/components/buttongroup"
```

```templ
@buttongroup.ButtonGroup() {
	@button.Button() {
		Button 1
	}
	@button.Button() {
		Button 2
	}
}
```

## Composition

Use the following composition to build a `ButtonGroup`:

```text
buttongroup.ButtonGroup
├── button.Button or input.Input
├── buttongroup.Separator
└── buttongroup.Text
```

## Accessibility

- The `ButtonGroup` component has the `role` attribute set to `group`.
- Use `Tab` to navigate between the buttons in the group.
- Use `aria-label` or `aria-labelledby` to label the button group.

```templ showLineNumbers
@buttongroup.ButtonGroup(buttongroup.Props{Attributes: templ.Attributes{"aria-label": "Button group"}}) {
	@button.Button() {
		Button 1
	}
	@button.Button() {
		Button 2
	}
}
```

## ButtonGroup vs ToggleGroup

- Use the `ButtonGroup` component when you want to group buttons that perform an action.
- Use the `ToggleGroup` component when you want to group buttons that toggle a state.

## Orientation

Set the `Orientation` prop to change the button group layout.

```templ
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.

```templ
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.

```templ
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.

```templ
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`.

```templ
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.

```templ
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.

```templ
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.

```templ
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.

```templ
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.

```templ
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.

| Prop          | Type                                              | Default                 |
| ------------- | ------------------------------------------------- | ----------------------- |
| `Orientation` | `OrientationHorizontal \| OrientationVertical` | `OrientationHorizontal` |
| `Class`       | `string`                                          | -                       |

```templ
@buttongroup.ButtonGroup() {
	@button.Button() {
		Button 1
	}
	@button.Button() {
		Button 2
	}
}
```

Nest multiple button groups to create complex layouts with spacing. See the [nested](#nested) example for more details.

```templ
@buttongroup.ButtonGroup() {
	@buttongroup.ButtonGroup()
	@buttongroup.ButtonGroup()
}
```

### Separator

The `buttongroup.Separator` component visually divides buttons within a group.

| Prop          | Type                                              | Default               |
| ------------- | ------------------------------------------------- | --------------------- |
| `Orientation` | `OrientationHorizontal \| OrientationVertical` | `OrientationVertical` |
| `Class`       | `string`                                          | -                     |

```templ
@buttongroup.ButtonGroup() {
	@button.Button() {
		Button 1
	}
	@buttongroup.Separator()
	@button.Button() {
		Button 2
	}
}
```

### Text

Use the `buttongroup.Text` component to display text within a button group.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

```templ
@buttongroup.ButtonGroup() {
	@buttongroup.Text() {
		Text
	}
	@button.Button() {
		Button
	}
}
```

Render a `label.Label` inside it to label an adjacent input.

```templ showLineNumbers
@buttongroup.ButtonGroup() {
	@buttongroup.Text() {
		@label.Label(label.Props{For: "name"}) {
			Text
		}
	}
	@input.Input(input.Props{ID: "name", Placeholder: "Type something here..."})
}
```