ToggleButton Overview
This article provides information about the Blazor ToggleButton component and its core features.
The ToggleButton component provides two-state styling according to the chosen theme, events and icons.
The ToggleButton component is part of Telerik UI for Blazor, a
professional grade UI library with 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
In this article:
Basic Button
To add a Telerik ToggleButton to your Blazor app, use the <TelerikToggleButton> tag. You may also want to add conditional logic for its content, icon or class based on its Selected field.
Basic Telerik ToggleButton
@result
<br />
<TelerikToggleButton @bind-Selected="@IsSelected" OnClick="@ToggleButtonClickHandler">
Selected: <strong>@IsSelected</strong>
</TelerikToggleButton>
@code {
bool IsSelected { get; set; } = true;
string result { get; set; }
async Task ToggleButtonClickHandler()
{
string currState = IsSelected ? "ON" : "OFF";
result = $"The user clicked the {currState} state.";
}
}
The result from the code snippet above
Disabled State
To disable a button, set its Enabled attribute to false.
Disabled Telerik ToggleButton
<TelerikToggleButton Enabled="false">Disabled Button</TelerikToggleButton>
Comparison between disabled and enabled button
Styling
You can style the button through its Class attribute to define your own CSS rules that apply to the HTML rendering. You may want to make them conditional based on its Selected state.
Set CSS class to the button and change its appearance
<TelerikToggleButton Class="@( IsSelected ? "my-on-class" : "the-off-class" )"
@bind-Selected="@IsSelected">
Selected: @IsSelected
</TelerikToggleButton>
@code {
bool IsSelected { get; set; }
}
<style>
.my-on-class,
.my-on-class:hover {
color: yellow;
font-weight: 700;
}
.the-off-class,
.the-off-class:hover {
border: 2px solid blue;
}
</style>
The result from the code snippet above
