ui-for-blazor-lp-pages-herobanner

Progress Telerik UI for Blazor

Buttons

  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • Blazor Button OnClick Event ​

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

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText
  • 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.Sitefinity.Libraries.Model.Image..AlternativeText

Next Steps

Launch demos See Blazor in action and check out how much it can do out-of-the-box.
Download preview Try Blazor with dedicated technical support.