Skip to content

Toggle Button

Meisam Alifallhi edited this page Apr 18, 2022 · 1 revision

Basic

1

<ToggleButton Text="Yes" ToggledText="No" />
<ToggleButton Text="Yes" ToggledText="No" Icon="IconName.Add" ToggledIcon="IconName.Remove" />

Button Color

2

<ToggleButton Color="Color.Default"  Text="Yes" ToggledText="No" />
<ToggleButton Color="Color.Secondary" Text="Yes" ToggledText="No" />
<ToggleButton Color="Color.Info"     Text="Yes" ToggledText="No" />
<ToggleButton Color="Color.Success"  Text="Yes" ToggledText="No" />
<ToggleButton Color="Color.Warning"  Text="Yes" ToggledText="No" />
<ToggleButton Color="Color.Danger"   Text="Yes" ToggledText="No" />

<ToggleButton Color="Color.Default"  Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Color="Color.Secondary" Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Color="Color.Info"     Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Color="Color.Success"  Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Color="Color.Warning"  Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Color="Color.Danger"   Icon="IconName.Add" ToggledIcon="IconName.Remove" />

Size

3

<ToggleButton Size="Size.ExtraSmall" Text="Yes" ToggledText="No" />
<ToggleButton Size="Size.Small"     Text="Yes" ToggledText="No" />
<ToggleButton Size="Size.Default"   Text="Yes" ToggledText="No" />
<ToggleButton Size="Size.Medium"    Text="Yes" ToggledText="No" />
<ToggleButton Size="Size.Large"     Text="Yes" ToggledText="No" />
<ToggleButton Size="Size.ExtraLarge" Text="Yes" ToggledText="No" />

<ToggleButton Size="Size.ExtraSmall" Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Size="Size.Small"     Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Size="Size.Default"   Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Size="Size.Medium"    Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Size="Size.Large"     Icon="IconName.Add" ToggledIcon="IconName.Remove" />
<ToggleButton Size="Size.ExtraLarge" Icon="IconName.Add" ToggledIcon="IconName.Remove" />

Disable Focus

<ToggleButton Focusable="false" Color="Color.Primary" Text="Yes" ToggledText="No" />
<ToggleButton Focusable="false" Color="Color.Primary" Icon="IconName.Add" ToggledIcon="IconName.Remove" />

Toggle Colors

4

<ToggleButton Text="Yes" ToggledText="No" Color="Color.Primary" ToggledColor="Color.Warning" />
<ToggleButton Text="Yes" ToggledText="No" TextColor="TextColor.Default" ToggledTextColor="TextColor.Danger" />
<ToggleButton Icon="IconName.Add" ToggledIcon="IconName.Remove" IconColor="TextColor.Default" ToggledIconColor="TextColor.Danger" />

Two-way binding

<Switch @bind-Checked="_toggled">Toggled</Switch>
<ToggleButton @bind-Toggled="_toggled" Text="Yes" ToggledText="No" />
<ToggleButton @bind-Toggled="_toggled" Icon="IconName.Add" ToggledIcon="IconName.Remove" />

@code {

    bool _toggled;  

}

Manual event binding

<Switch @bind-Checked="_toggled">Toggled</Switch>
<ToggleButton Toggled="_toggled" ToggledChanged="OnToggleChanged" Text="Yes" ToggledText="No" />
<ToggleButton Toggled="_toggled" ToggledChanged="OnToggleChanged" Icon="IconName.Add" ToggledIcon="IconName.Remove" />

@code {
    bool _toggled;

    private void OnToggleChanged(bool toggled)
    {
        _toggled = toggled;
    }
}
Clone this wiki locally