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.
Switch between Horizontal and Vertical to see the layout change live.
API Reference
ButtonGroup
| Property | Type | Default | Description |
|---|---|---|---|
| Orientation | Lumeo.Orientation | Horizontal | Layout direction of the group. Values: Lumeo.Orientation.Horizontal, Lumeo.Orientation.Vertical. |
| ChildContent | RenderFragment? | — | The Button elements to group together. |
| Class | string? | null | Additional CSS classes applied to the wrapper element. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes forwarded to the wrapper element. |
Related Components
- 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.