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 />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
11 tests across 2 files. Auto-generated from the test suite.
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
| Prop | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | — | The buttons (or button-like elements, e.g. link-buttons or Toggle) to render as a single visually-joined group. |
| Class | string? | — | Additional CSS classes merged onto the root role="group" element. |
| Orientation | Lumeo.Orientation | Lumeo.Orientation.Horizontal | Layout direction: Horizontal (default) joins children left-to-right with rounded end-caps; Vertical stacks them top-to-bottom. |
| AriaLabel | string? | — | Accessible name for the button group (exposes it to AT as a named role="group"). Roving tabindex is intentionally NOT forced here — a ButtonGroup commonly wraps independent actions that each need their own tab stop; use Toolbar for single-tab-stop/arrow-key navigation. (#270) |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes splatted onto the root role="group" 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.