Toggle Sidebar B
header.lightDarkMode D

Button Group

Joins a row or column of Buttons (or inputs) so adjacent corners and borders collapse cleanly. Use for segmented controls, attached input + button, or toolbars.

Default

Horizontal row of Buttons that share borders.

Vertical

Stack buttons by setting orientation to vertical.

With input

Attach an Input and Button into one shape.

With separator

Insert ButtonGroupSeparator to visually divide segments.

API Reference

Props, events, and slots for each sub-component.

ButtonGroup

Props

PropTypeDefaultDescription
orientation"horizontal" | "vertical""horizontal"Axis of the group.
classstringExtra classes, merged with cn().

ButtonGroupSeparator / ButtonGroupText

Props

PropTypeDefaultDescription
classstringVisual separator and inline static text label inside a group.