# ButtonGroup

Source: https://lumeo.nativ.sh/components/button-group

# 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.

Preview Code

Horizontal (default)

Copy Code

Preview Code

Vertical

Top Middle Bottom

Copy Code

Preview Code

Mixed Variants

Save Preview Discard

Copy Code

Preview Code

With Labels

Previous 1 2 3 Next

Copy Code

Preview Code

Orientation — interactive preview

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

Horizontal Vertical

Copy Code

## 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](/components/button) — The individual action element placed inside a ButtonGroup.
-   [Toggle](/components/toggle) — A two-state button for on/off actions like bold or mute.
-   [ToggleGroup](/components/toggle-group) — A group of toggles for selecting one or more options from a set.
-   [SplitButton](/components/split-button) — A button with a separate chevron half that opens a dropdown menu.