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.

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>