Button Group

Button groups join related actions into a single visual unit. Borders between buttons merge, and only the outer corners stay rounded.

Basic Usage

Horizontal (default) groups buttons side-by-side. Vertical stacks them:

Pagination controls, view toggles, and segmented controls all benefit from button groups:

orientation

str

default:"\"horizontal\""

Layout direction: "horizontal" or "vertical".

css_class

str | None

default:"None"

Additional Tailwind CSS classes appended to the component’s built-in styles.

ButtonGroup

{
  "type": "ButtonGroup",
  "children?": "[Component]",
  "orientation?": "horizontal | vertical",
  "cssClass?": "string"
}

For the complete protocol schema, see ButtonGroup.

⌘I