Mudblazor

Community Support

Discord

Gitter

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

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

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 a SVG string.

See Toggle Icon Button API for parameter documentation.

Basic usage

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

Alarm is Off
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudToggleIconButton @bind-Toggled="@AlarmOn"
                     Icon="@Icons.Material.Filled.AlarmOff" Color="@Color.Error"
                     ToggledIcon="@Icons.Material.Filled.AlarmOn" ToggledColor="@Color.Success"/>

<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)
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudToggleIconButton Toggled="@AlarmOn" ToggledChanged="OnToggledChanged"
                     Icon="@Icons.Material.Filled.AlarmOff" Color="@Color.Error" 
                     ToggledIcon="@Icons.Material.Filled.AlarmOn" ToggledColor="@Color.Success" />

<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 🗙