Button Group

A container that groups related buttons together with consistent styling.

Basic

Group buttons together. Borders and rounded corners are merged automatically.

<ButtonGroup>
    <Button Variant="ButtonVariant.Outline">Left</Button>
    <Button Variant="ButtonVariant.Outline">Center</Button>
    <Button Variant="ButtonVariant.Outline">Right</Button>
</ButtonGroup>

Variants

ButtonGroup works with all button variants.

@* Default variant *@
<ButtonGroup>
    <Button>Save</Button>
    <Button>Save & Close</Button>
</ButtonGroup>

@* Secondary variant *@
<ButtonGroup>
    <Button Variant="ButtonVariant.Secondary">Draft</Button>
    <Button Variant="ButtonVariant.Secondary">Preview</Button>
    <Button Variant="ButtonVariant.Secondary">Publish</Button>
</ButtonGroup>

@* Outline variant *@
<ButtonGroup>
    <Button Variant="ButtonVariant.Outline">Copy</Button>
    <Button Variant="ButtonVariant.Outline">Cut</Button>
    <Button Variant="ButtonVariant.Outline">Paste</Button>
</ButtonGroup>

Vertical

Set Orientation to Vertical to stack buttons vertically.

<ButtonGroup Orientation="ButtonGroupOrientation.Vertical">
    <Button Variant="ButtonVariant.Outline">Top</Button>
    <Button Variant="ButtonVariant.Outline">Middle</Button>
    <Button Variant="ButtonVariant.Outline">Bottom</Button>
</ButtonGroup>

Separator

Use ButtonGroupSeparator to visually divide buttons within a group. Useful for non-outline variants.

<ButtonGroup>
    <Button>Save</Button>
    <ButtonGroupSeparator />
    <Button>Discard</Button>
</ButtonGroup>

<ButtonGroup>
    <Button Variant="ButtonVariant.Secondary">Copy</Button>
    <ButtonGroupSeparator />
    <Button Variant="ButtonVariant.Secondary">Cut</Button>
    <ButtonGroupSeparator />
    <Button Variant="ButtonVariant.Secondary">Paste</Button>
</ButtonGroup>

Split Button

Create a split button by combining a button with an icon button.

<ButtonGroup>
    <Button>Save changes</Button>
    <ButtonGroupSeparator />
    <Button Size="ButtonSize.Icon">
        <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="m6 9 6 6 6-6"/>
        </svg>
    </Button>
</ButtonGroup>

Split Button with Dropdown

Combine a split button with a DropdownMenu for additional actions.

<ButtonGroup>
    <Button>Save changes</Button>
    <ButtonGroupSeparator />
    <DropdownMenu>
        <DropdownMenuTrigger>
            <Button Size="ButtonSize.Icon">
                <ChevronDownIcon />
            </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent Align="DropdownMenuAlign.End" Class="w-48">
            <DropdownMenuItem>Save as Draft</DropdownMenuItem>
            <DropdownMenuItem>Save & Publish</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Save as Template</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>
</ButtonGroup>

With Input

Combine buttons with an Input component.

https:// 
<ButtonGroup>
    <ButtonGroupText>https://</ButtonGroupText>
    <Input Placeholder="example.com" Class="rounded-none border-l-0" />
    <Button Variant="ButtonVariant.Outline">Go</Button>
</ButtonGroup>

Sizes

Buttons within a group can have different sizes.

<ButtonGroup>
    <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Sm">Small</Button>
    <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Sm">Group</Button>
</ButtonGroup>

<ButtonGroup>
    <Button Variant="ButtonVariant.Outline">Default</Button>
    <Button Variant="ButtonVariant.Outline">Group</Button>
</ButtonGroup>

<ButtonGroup>
    <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Lg">Large</Button>
    <Button Variant="ButtonVariant.Outline" Size="ButtonSize.Lg">Group</Button>
</ButtonGroup>