ComponentsActions
Button group
A button group joins related actions into one connected control and styles them together. Choose it for a small set of peer actions, such as pagination or alignment, and for split buttons that pair a default action with alternatives.
Variants
The group sets Variant, Color and Size for every child, so the joined edges and dividers stay consistent.
Every variant and color
All 36 combinations of the group's Variant and Color, rendered from the enums.
| Variant ↓ · Color → | Default | Primary | Secondary | Tertiary | Info | Success | Warning | Error | Dark | Transparent | Inherit | Surface |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Text | ||||||||||||
| Filled | ||||||||||||
| Outlined |
Sizes and vertical groups
Size applies to the whole group. Vertical stacks the buttons, which suits a short list of options in a side panel.
Split button
A default action next to a menu of alternatives. The menu trigger is icon-only, so it carries its own accessible name.
Choose an option from the arrow, then press the main button.
Toolbar
Several groups side by side form a toolbar. Each icon button still needs its own accessible name; the toolbar role and label describe the whole strip.
Last action: none
Overrides, width and disabled buttons
OverrideStyles="false" lets each button keep its own color. FullWidth stretches the group, and a single button can be disabled on its own.
Playground
Change the group's parameters; the markup below shows only the values that differ from the defaults.
<MudButtonGroup Variant="Variant.Outlined" Color="Color.Primary">
<MudButton>Economy</MudButton>
<MudButton>Business</MudButton>
<MudButton>First</MudButton>
</MudButtonGroup>