<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>
<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>
<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>
<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; }