logo

Button Group

A container that groups related buttons together with consistent styling.

Default

Usage

Loading...

Examples

Separated

Use attached={false} to add spacing between grouped buttons.

Vertical

Use orientation="vertical" to stack buttons.

API Reference

The ButtonGroup component renders a div with role="group".

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Layout direction for the group.
attachedbooleantrueRemove gaps and join borders when true.
classNamestringundefinedAdd custom classes.
aria-labelstringundefinedAccessible label for the group when no visible label is present.