MudBlazor

Toggle Icon Button

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.

Basic usage

Use two-way binding @bind-Toggle="..." to update a bound value in the parent component.

Alarm is Off
<MudToggleIconButton @bind-Toggled="@AlarmOn"
                     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; }
}

Advanced usage

You may act on the toggled state by using the Toggled EventCallback.

Alarm is Off I have been switched on 0 times (Remaining: 5)
<MudToggleIconButton Toggled="@AlarmOn" 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 ourself
        AlarmOn = toggled;

        if (AlarmOn)
        {
            if (SwitchedOnCount < MaxCount)
                SwitchedOnCount++;
            else
                AlarmOn = false;    // We can force a state under specific condition (max count reached)
        }
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙