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

Orientation

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

Common Patterns

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

API Reference

ButtonGroup Parameters

str

default:"\"horizontal\""

Layout direction: "horizontal" or "vertical".

str | None

default:"None"

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

Protocol Reference

ButtonGroup

{
  "type": "ButtonGroup",
  "id?": "string",
  "onMount?": "any",
  "children?": "[Component]",
  "let?": "object",
  "orientation?": "horizontal | vertical",
  "cssClass?": "string"
}

For the complete protocol schema, see ButtonGroup.

⌘I

Get Started

Concepts

Apps

Running Prefab

Examples

Reference

Basic Usage

Orientation

Common Patterns

API Reference

ButtonGroup Parameters

Protocol Reference

​Basic Usage

​Orientation

​Common Patterns

​API Reference

ButtonGroup Parameters

​Protocol Reference

Basic Usage

Orientation

Common Patterns

API Reference

Protocol Reference