Button Group

A container that groups related buttons together with consistent styling.

<ButtonGroup aria-label="Email actions">
    <ButtonGroup Class="hidden sm:flex" aria-label="Back navigation">
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon" aria-label="Go back">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 18l-6-6 6-6" /></svg>
        </Button>
    </ButtonGroup>
    <ButtonGroup aria-label="Primary email actions">
        <Button Variant="@Button.ButtonVariant.Outline">Archive</Button>
        <Button Variant="@Button.ButtonVariant.Outline">Report</Button>
    </ButtonGroup>
    <ButtonGroup aria-label="Snooze actions">
        <Button Variant="@Button.ButtonVariant.Outline">Snooze</Button>
        <DropdownMenu Class="[&>[data-slot=dropdown-menu-trigger]]:inline-flex [&>[data-slot=dropdown-menu-trigger]>[data-slot=button]]:rounded-l-none [&>[data-slot=dropdown-menu-trigger]>[data-slot=button]]:border-l-0">
            <DropdownMenuTrigger>
                <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon" aria-label="More actions">...</Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent Class="top-auto bottom-full left-auto right-0 mt-0 mb-2 w-52">
                <DropdownMenuItem>Mark as Read</DropdownMenuItem>
                <DropdownMenuItem>Archive</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem>Snooze</DropdownMenuItem>
                <DropdownMenuItem>Add to Calendar</DropdownMenuItem>
                <DropdownMenuItem>Add to List</DropdownMenuItem>
                <DropdownMenuItem>Label as Personal</DropdownMenuItem>
                <DropdownMenuItem>Label as Work</DropdownMenuItem>
                <DropdownMenuItem>Label as Other</DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem Class="text-destructive">Trash</DropdownMenuItem>
            </DropdownMenuContent>
        </DropdownMenu>
    </ButtonGroup>
</ButtonGroup>

Installation

Install the button group component using the command or manual steps.

blazor-shadcn add button-group

Usage

import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group"

<ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
</ButtonGroup>

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.

<ButtonGroup aria-label="Button group">
    <Button>Button 1</Button>
    <Button>Button 2</Button>
</ButtonGroup>

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.

Examples

Orientation

Set the orientation prop to change the button group layout.

<ButtonGroup Orientation="ButtonGroup.GroupOrientation.Vertical" aria-label="Zoom controls">
    <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.IconSm" aria-label="Zoom in">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14" /><path d="M5 12h14" /></svg>
    </Button>
    <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.IconSm" aria-label="Zoom out">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14" /></svg>
    </Button>
</ButtonGroup>

Size

<div class="flex flex-col items-start gap-4">
    <ButtonGroup>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Small</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Button</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Sm">Group</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.IconSm" aria-label="Add">+</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button Variant="@Button.ButtonVariant.Outline">Default</Button>
        <Button Variant="@Button.ButtonVariant.Outline">Button</Button>
        <Button Variant="@Button.ButtonVariant.Outline">Group</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon" aria-label="Add">+</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Lg">Large</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Lg">Button</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Lg">Group</Button>
        <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.IconLg" aria-label="Add">+</Button>
    </ButtonGroup>
</div>

Nested Coming soon

Coming Soon

Separator

Buttons with variant outline do not need a separator since they already have a border.

<ButtonGroup aria-label="Clipboard actions">
    <Button Variant="@Button.ButtonVariant.Secondary" Size="@Button.ButtonSize.Sm">Copy</Button>
    <ButtonGroupSeparator />
    <Button Variant="@Button.ButtonVariant.Secondary" Size="@Button.ButtonSize.Sm">Paste</Button>
</ButtonGroup>

Split

<ButtonGroup aria-label="Split button">
    <Button Variant="@Button.ButtonVariant.Secondary" Size="@Button.ButtonSize.Sm">Button</Button>
    <ButtonGroupSeparator />
    <Button Variant="@Button.ButtonVariant.Secondary" Size="@Button.ButtonSize.IconSm" aria-label="Add">+</Button>
</ButtonGroup>

Input

<ButtonGroup Class="w-full max-w-sm" aria-label="Search">
    <Input Placeholder="Search..." Class="rounded-r-full border-r-0" />
    <Button Variant="@Button.ButtonVariant.Outline" Size="@Button.ButtonSize.Icon" Class="rounded-full" aria-label="Search">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
    </Button>
</ButtonGroup>

Input Group Coming soon

Coming Soon

Select Coming soon

Coming Soon

API Reference

ButtonGroup

The ButtonGroup component is a container that groups related buttons together with consistent styling.

Prop	Type	Default
Orientation	`Horizontal \| Vertical`	Horizontal

<ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
</ButtonGroup>

Nest multiple button groups to create complex layouts with spacing. See the nested example for more details.

<ButtonGroup>
    <ButtonGroup />
    <ButtonGroup />
</ButtonGroup>

ButtonGroupSeparator

The ButtonGroupSeparator component visually divides buttons within a group.

Prop	Type	Default
Orientation	`Horizontal \| Vertical`	Vertical

<ButtonGroup>
    <Button>Button 1</Button>
    <ButtonGroupSeparator />
    <Button>Button 2</Button>
</ButtonGroup>

ButtonGroupText

Use this component to display text within a button group.

Prop	Type	Default
AsChild	`bool`	false

<ButtonGroup>
    <ButtonGroupText>Text</ButtonGroupText>
    <Button>Button</Button>
</ButtonGroup>

On This Page

Installation Usage Accessibility ButtonGroup vs ToggleGroup Examples Orientation Size Nested Separator Split Input Input Group Dropdown Menu Select Popover API Reference

Button Group

Installation

Usage

Accessibility

ButtonGroup vs ToggleGroup

Examples

Orientation

Size

Nested Coming soon

Separator

Split

Input

Input Group Coming soon

Dropdown Menu Coming soon

Select Coming soon

Popover Coming soon

API Reference

ButtonGroup

ButtonGroupSeparator

ButtonGroupText