Progress Telerik UI for Blazor

Blazor Buttons

  • The Blazor Button component features three essential button types and styling capabilities for theme, click event and icons. 
  • 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
  • Blazor Buttons Overview

    The Telerik UI for Blazor Button is a component that provides full control over its visual appearance based on the chosen theme, click event and icon in both Blazor WebAssembly (WASM) and server-side Blazor apps.

    The Blazor button can be rendered as Submit, Button and Reset type of button and provides the option to apply image, sprite or a font icon in it, so that you can illustrate its purpose to end users. It has built-in keyboard navigation and gives flexibility to developers through its OnClick event.

    Telerik UI for Blazor Button Overview
  • Blazor Button Types

    The ButtonType property of the Button component allows you to configure the type of element you want to be rendered. The available button types you can set in Blazor applications are as follows:  

    • Submit - Renders a type="submit" attribute. Can submit the form and trigger validation. The default value. 

    • Button - Renders a type="button" attribute. Does not invoke form validation and submission. 

    • Reset - Renders a type="reset" attribute. Can reset the current form. 

  • Styling Blazor Buttons

    The Button component offer s multiple options for styling: through its Class attribute, by using image, sprite or a font icon. To customize the Button in your Blazor apps, all you have to do is set the Icon, SpriteClass or ImageURL attributes, or simple reuse one of the available built-in font icons from the Telerik UI for Blazor suite.

    Another way to customize the Button component is to apply the predefined Primary button styling. Through its Primary property, the button receives strong color and stands out in the Blazor app. This way the component becomes more visible and attracts user attention for clicking.

    Of course, you can also set the Class of a component instance and tweak it as needed with your own CSS rules.

    Telerik UI for Blazor Butons Styling
  • Blazor Button OnClick Event ​

    The Button component exposes OnClick event to enable you handle user click actions in Blazor applications code. 

    Telerik UI for Blazor Events
  • Blazor Button Keyboard Navigation and Accessibility

    Semantic HTML and support for the accessibility standards (including WCAG, Section 508 and WAI-ARIA attributes for screen readers) let users with disabilities use the Telerik Blazor Button with ease. 

    The Button component has built-in keyboard navigation allowing end users to easily navigate, focus and click on buttons using their keyboard.  

    Telerik UI for Bazor Keyboard Navigation
  • Blazor Button Themes

    The Telerik Blazor Button 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 with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application

    Telerik UI for Blazor Button Themes

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.