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.

Telerik UI for Blazor Ninja image

The ToggleButton component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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, shape, 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

See Also

In this article