Blazor 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.

Telerik UI for Blazor Ninja image

The ToggleButton component is part of Telerik UI for Blazor, a professional grade UI library with 95+ 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

<br />

<TelerikToggleButton @bind-Selected="@IsSelected" OnClick="@ToggleButtonClickHandler">
    Selected: &nbsp; <strong>@IsSelected</strong>

@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

Basic Toggle Button

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

Disabled and Enabled Toggle Button


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" )"
    Selected: @IsSelected

@code {
    bool IsSelected { get; set; }

    .my-on-class:hover {
        color: yellow;
        font-weight: 700;

    .the-off-class:hover {
        border: 2px solid blue;

The result from the code snippet above

Toggle Button Conditional Styling

See Also

In this article