Button Group

The MudButtonGroup component can be used to group related MudButtons.

See also: Toggle Group

Basic button group
<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Primary" Variant="Variant.Text">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>
Sizes and colors
<MudButtonGroup Color="Color.Default" Size="Size.Small" Variant="Variant.Outlined">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Secondary" Size="Size.Medium" Variant="Variant.Outlined">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Primary" Size="Size.Large" Variant="Variant.Outlined">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>
Vertical button group

With VerticalAlign="true" the buttons are displayed vertically.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined" VerticalAlign="true">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" VerticalAlign="true">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudButtonGroup Color="Color.Primary" Variant="Variant.Text" VerticalAlign="true">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>
Icon buttons

MudButtonGroup can also make use of MudIconButton and MudToggleIconButton.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined">
    <MudIconButton Icon="@Icons.Material.Filled.AccessAlarm"></MudIconButton>
    <MudToggleIconButton Icon="@Icons.Material.Filled.AlarmOff" Color="@Color.Error"
                         ToggledIcon="@Icons.Material.Filled.AlarmOn" ToggledColor="@Color.Success" />
    <MudButton StartIcon="@Icons.Material.Filled.AlarmAdd" IconColor="Color.Warning">Add alarm</MudButton>
</MudButtonGroup>
Split button

A MudMenu can be used to create a split button.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined">
    <MudButton>@_buttonText</MudButton>
    <MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Style="align-self: auto;">
        <MudMenuItem OnClick="() => SetButtonText(0)">Reply</MudMenuItem>
        <MudMenuItem OnClick="() => SetButtonText(1)">Reply All</MudMenuItem>
        <MudMenuItem OnClick="() => SetButtonText(2)">Forward</MudMenuItem>
        <MudMenuItem OnClick="() => SetButtonText(3)">Reply & Delete</MudMenuItem>
    </MudMenu>
</MudButtonGroup>
@code {
    private string _buttonText = "Reply";

    private void SetButtonText(int id)
    {
        switch (id)
        {
            case 0: _buttonText = "Reply";
                break;
            case 1:
                _buttonText = "Reply All";
                break;
            case 2:
                _buttonText = "Forward";
                break;
            case 3:
                _buttonText = "Reply & Delete";
                break;
        }
    }
}
Disable elevation

With DisableElevation="false" the dropshadow of button groups with Variant="Variant.Filled" is removed.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Filled" DisableElevation="@_disableElevation">
    <MudButton>One</MudButton>
    <MudButton>Two</MudButton>
    <MudButton>Three</MudButton>
</MudButtonGroup>

<MudSwitch @bind-Checked="@_disableElevation" Label="Disable elevation" Color="Color.Primary" />
@code {
    private bool _disableElevation = true;
}
Custom styles

With OverrideStyles="false" the MudButtonGroup no longer overrides the styles of the individual buttons.

<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined" OverrideStyles="_overrideStyles">
    <MudButton Color="Color.Primary" Variant="Variant.Outlined">One</MudButton>
    <MudButton Color="Color.Warning" Variant="Variant.Outlined">Two</MudButton>
    <MudButton Color="Color.Secondary" Variant="Variant.Outlined">Three</MudButton>
</MudButtonGroup>

<MudSwitch @bind-Checked="@_overrideStyles" Label="Override styles" Color="Color.Primary" />
@code {
    private bool _overrideStyles;
}

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.3

An unhandled error has occurred. Reload 🗙