Button Group

ButtonGroup visually connects a set of related Buttons into a single control. Buttons are passed in as children - ButtonGroup only decides how they are laid out and joined together; each Button keeps its own color and variant.

<ButtonGroup>
    <Button variant="outline" color="gray">Button 1</Button>
    <Button variant="outline" color="gray">Button 2</Button>
    <Button variant="outline" color="gray">Button 3</Button>
</ButtonGroup>

It works the same way with any color or variant, including fill:

<ButtonGroup>
    <Button color="accent">One</Button>
    <Button color="accent">Two</Button>
    <Button color="accent">Three</Button>
</ButtonGroup>

Properties

Name
Default
Description
column
false
Whether to stack the buttons in a column instead of a row.
divider
true
Whether to show the thin divider line between adjacent filled buttons. Outline variants never show this divider since their borders already separate the buttons.

Column

Set the column attribute to stack the buttons instead of placing them side by side.

<ButtonGroup column>
    <Button variant="outline" color="gray">Button 1</Button>
    <Button variant="outline" color="gray">Button 2</Button>
    <Button variant="outline" color="gray">Button 3</Button>
</ButtonGroup>

Divider

By default, adjacent filled buttons are separated by a subtle divider line. Set divider=false to remove it.

<ButtonGroup divider={false}>
    <Button color="accent">One</Button>
    <Button color="accent">Two</Button>
    <Button color="accent">Three</Button>
</ButtonGroup>

Examples

Mixed variants

Variants can be combined too. For example, a solid primary action joined to a quieter outline secondary action.

<ButtonGroup>
    <Button color="accent">Save</Button>
    <Button variant="outline" color="gray">Save as draft</Button>
</ButtonGroup>

Split button

A primary action joined to a smaller menu trigger, a common pattern for "do this, or pick a variation".

<ButtonGroup>
    <Button color="accent">Merge pull request</Button>
    <Button color="accent">
        {#snippet start()}
            <IconCaretDownFill />
        {/snippet}
    </Button>
</ButtonGroup>

Icon toolbar

Icon-only buttons make a compact segmented toolbar, e.g. for text formatting.

<ButtonGroup>
    <Button variant="outline" color="gray">
        {#snippet start()}
            <IconTypeBold />
        {/snippet}
    </Button>
    <Button variant="outline" color="gray">
        {#snippet start()}
            <IconTypeItalic />
        {/snippet}
    </Button>
    <Button variant="outline" color="gray">
        {#snippet start()}
            <IconTypeUnderline />
        {/snippet}
    </Button>
</ButtonGroup>

Previous / Next pager

<ButtonGroup>
    <Button variant="outline" color="gray">
        {#snippet start()}
            <IconChevronLeft />
        {/snippet}
        Previous
    </Button>
    <Button variant="outline" color="gray">
        Next
        {#snippet end()}
            <IconChevronRight />
        {/snippet}
    </Button>
</ButtonGroup>

Column with mixed content

<ButtonGroup column>
    <Button color="accent">Account settings</Button>
    <Button variant="outline" color="gray">Billing</Button>
    <Button variant="outline" color="red">Delete account</Button>
</ButtonGroup>
HYVOR Logo