Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub

Reply

Reply All

Forward

Reply & Delete

MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Button Group

The MudButtonGroup component can be used to group related MudButtons.

Basic button group

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Reply

Reply All

Forward

Reply & Delete

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudButtonGroup Color="Color.Primary" Variant="Variant.Outlined">
    <MudButton>@_buttonText</MudButton>
    <MudMenu Icon="@Icons.Material.Filled.ArrowDropDown" Direction="Direction.Bottom" OffsetY="true">
        <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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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;
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙