A toggleable implementation of MudIconButton where you can use its familiar API to define two different states which you can toggle between. For available icons, go to Icons.. Custom icons are passed as an SVG string.
Use two-way binding @bind-Toggle="..." to update a bound value in the parent component.
<MudToggleIconButton @bind-Toggled="" Icon="@Icons.Material.Filled.AlarmOff" Color="@Color.Error" Title="Off" ToggledIcon="@Icons.Material.Filled.AlarmOn" ToggledColor="@Color.Success" ToggledTitle="On"/> <span>Alarm is @(AlarmOn ? "On" : "Off")</span>
@code { public bool AlarmOn { get; set; } }
You may act on the toggled state by using the Toggled EventCallback.
<MudToggleIconButton Toggled="" ToggledChanged="OnToggledChanged" Icon="@Icons.Material.Filled.AlarmOff" Color="@Color.Error" Title="Off" ToggledIcon="@Icons.Material.Filled.AlarmOn" ToggledColor="@Color.Success" ToggledTitle="On" /> <span>Alarm is @(AlarmOn ? "On" : "Off")</span> <span>@($"I have been switched on {SwitchedOnCount} times (Remaining: {MaxCount - SwitchedOnCount})")</span>
@code { public bool AlarmOn { get; set; } public int SwitchedOnCount { get; set; } private const int MaxCount = 5; public void OnToggledChanged(bool toggled) { // Because variable is not two-way bound, we need to update it ourselves. AlarmOn = toggled; if (AlarmOn) { if (SwitchedOnCount < MaxCount) SwitchedOnCount++; else AlarmOn = false; // We can force a state under specific condition (max count reached). } } }