ButtonGroup
Joins multiple Buttons into a segmented bar with shared/collapsed borders and rounded first/last edges.
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 | ButtonGroupOrientation | Horizontal | Layout direction of the group. Values: ButtonGroup.ButtonGroupOrientation.Horizontal, ButtonGroup.ButtonGroupOrientation.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.