Lumeo

ButtonGroup

Joins multiple Buttons into a segmented bar with shared/collapsed borders and rounded first/last edges.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<ButtonGroup />

When to Use

Group related actions that share a common visual boundary, like text-formatting controls.
Present a small set of mutually related actions without relying on a dropdown.
Build compact toolbars where every button belongs to the same conceptual group.

Horizontal (default)

Vertical

Mixed Variants

With Labels

Orientation — interactive preview

Switch between Horizontal and Vertical to see the layout change live.

API Reference

ButtonGroup

Button — The individual action element placed inside a ButtonGroup.
Toggle — A two-state button for on/off actions like bold or mute.
ToggleGroup — A group of toggles for selecting one or more options from a set.
SplitButton — A button with a separate chevron half that opens a dropdown menu.