Progress Telerik UI for Blazor

Blazor Toggle Button

  • Change a setting between two states and indicate the currently active one with the Blazor Toggle Button component.
  • This component is part of the largest truly native Blazor component suite - Telerik UI for Blazor designed to perfectly fit in any app’s requirement.
  • The Blazor UI suite also comes with professionally designed themes enabled with a flip of a switch, document processing library, rich docs & demos to help you get started in no time.
Telerik UI for Blazor Suite
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Telerik UI for Blazor ToggleButton is a two-state button, perfect for when you need to provide the user with an option to flip a switch. It complements the Checkbox as a mean of toggling options in a more actionable way. For example, you might want to use it as Mute/Unmute or Play/Pause buttons in a media player. The button’s selected state is databindable to your model which makes using it a joy.

    Blazor ToggleButton demo

    Telerik UI for Blazor ToggleButton Component
  • Icons & Styling

    The ToggleButton can be styled in several ways:

    • You can apply your own CSS class depending on its state.
    • Icons can be added to illustrate the button. They can be loaded through a Telerik Font Icon, raster images, sprites or a custom icon font
    • Content can be modified depending on its state too – going back to the Player/Pause example, you can switch between a Play and Pause icon depending on the state of your player.
    • The button also possesses a disable state for when you want to forbid users from modifying it. This state comes with a default styling, but it can be overridden with an attribute.
    Learn more about Blazor ToggleButton Icons in our documentation
    Telerik UI for Blazor ToggleButton States
  • Events

    Two important events are provided – OnClick and SelectedChanged which are fired exactly when you think they are. SelectedChanged is more general than OnClick as it is also triggered by keyboard shortcuts.

    Telerik UI for Blazor Events
  • ToggleButton Accessibility and Keyboard Navigation

    Like all other Telerik UI for Blazor components, the ToggleButton component supports out of the box Keyboard Navigation and web accessibility standards implementation. This enables easy navigation through pages using just keyboard, as well as access to component content through assistive technologies.

    Accessibility for Telerik UI for ASP.NET Core
  • Blazor ToggleButton Theming

    The Telerik Blazor ToggleButton component has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines) and Bootstrap (which looks like the Bootstrap styling to integrate better). You can easily customize any of out-of-the-box themes, style specific component or create new theme using the Telerik Saas ThemeBuilder application.

    Telerik UI for Blazor ToggleButton Theming

All Blazor Components

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.