Blazor ToggleButton Overview

This article provides information about the Blazor ToggleButton component and its core features.

The ToggleButton component can have a selected state, which is the main difference from the regular Button. The two-state styling depends on the chosen theme. The ToggleButton also provides events, declarative appearance customization and can nest icons.

The ToggleButton component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

Creating Blazor ToggleButton

1. Use the <TelerikToggleButton> tag.
2. Set the Selected parameter to a bool property. Use two-way binding, or one-way binding with a SelectedChanged handler.
3. Handle the OnClick event.
4. (optional) Add an icon or configure the appearance.

Basic Telerik ToggleButton

<TelerikToggleButton @bind-Selected="@IsSelected"
                     OnClick="@OnToggleButtonClick">
    Selected: <strong>@IsSelected</strong>
</TelerikToggleButton>

<p> @result </p>

@code {
    bool IsSelected { get; set; } = true;

    string result { get; set; }

    async Task OnToggleButtonClick()
    {
        string currentState = IsSelected ? "ON" : "OFF";
        result = $"The user clicked the {currentState} state";
    }
}

Events

The Toggle Button exposes events for clicks and selected state changes. Find more in the Toggle Button Events article.

Icons

The Toggle Button provides a built-in way to render Telerik font icons, custom font icons, images or sprites.

Appearance

The Toggle Button provides several parameters that control its styling and appearance, including background color, rounded corners and fill.

ToggleButton Parameters

The following table lists Toggle Button parameters, which are not discussed elsewhere. Check the ToggleButton API Reference for a full list of properties, methods and events.

Parameter	Type and Default Value	Description
AriaLabel	string	Renders an aria-label HTML attribute to the button element.
Class	string	Renders additional CSS class to the <button class="k-button"> element. Use it to apply custom styles or override the theme. See Custom Styling below.
Enabled	bool (true)	Determines if the button is enabled and accepts clicks.
Id	string	Renders an id HTML attribute to the button element.
TabIndex	int	Renders a tabindex attribute.
Title	string	Renders a title attribute.

Custom Styling

It is possible to apply custom styles to the button through its Class parameter. You may want to customize the styling based on the Selected state.

Set CSS class to the button and change its appearance

<TelerikToggleButton Class="my-toggle">
    Toggle Button
</TelerikToggleButton>

<style>
    /* default state */
    .my-toggle.k-button,
    .my-toggle.k-button:hover {
        border: 2px solid blue;
    }
    /* selected state */
    .my-toggle.k-selected,
    .my-toggle.k-selected:hover {
        color: yellow;
        font-weight: 700;
    }
</style>

Next Steps

• Handle Toggle Button Events
• Enhance the Toggle Button with Icons

See Also

• Live Demo: ToggleButton
• ToggleButton API Reference