Blazor Button Overview
This article introduces the Blazor Button component, shows how to start using it, and lists its core features.
Buttons convey user actions and can display text, images and HTML.
The Blazor Button provides a variety of styling options through the built-in themes and the button type. It supports font icons and images and fires click events.
The Button 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.
Creating Blazor Button
Use the
<TelerikButton>
tag to add the component to your razor page.Handle the
OnClick
event to respond to the user action.
@result
<br />
<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>
@code {
private string result;
private async Task OnClickHandler()
{
result = DateTime.Now.ToString();
}
}
Icons
To visually communicate the purpose of a button, you can add an image, sprite, or font icon. You can choose between a wide range of built-in font icons or use your custom font icons. Read more about the Blazor Button icons...
Type
To control the submit behavior of the Blazor Button, use the Type
attribute. Select from the following button types: Submit
, Reset
, and Button
. The component also provides a Form
parameter, which allows the user to submit a form from an external button. Read more about the Blazor Button Type...
Events
The Blazor Button fires events that you can handle and respond to user actions. Read more about the Blazor Button events....
Disabled State
To prevent user interaction with a Button, disable it. Read more about the disabled state of the Blazor Button....
Styling
To customize the style and the appearance of the Blazor Button, you can use the built-in themes. Additionally, set the Class
attribute to implement custom CSS rules or configure the built-in appearance options.
To learn more about the appearance, anatomy, and accessibility of the Button, visit the Progress Design System Kit documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.
Button Parameters
The Blazor Button provides various parameters that allow you to configure the component. Also check the Button's public API.
Parameter | Type and Default Value | Description |
---|---|---|
ButtonType |
ButtonType enum ( ButtonType.Submit ) |
The type attribute of the Button. |
Class |
string |
The CSS class that will be rendered on the main wrapping element of the Button (<button class="k-button> ). |
Enabled |
bool ( true ) |
Whether the Button is enabled. |
Form |
string |
The ID of the associated form. Allows using a submit button outside a form. |
Id |
string |
The id attribute of the Button. |
Icon |
object |
The icon rendered in the Button. Can be set to a predefined Telerik icon or a custom one. |
Title |
string |
The title attribute of the Button. |
Visible |
bool ( true ) |
Whether the Button is visible. |
Button Reference and Methods
Add a reference to the component instance to use the Button methods. Be aware of the Blazor life cycle if you want to focus the component on page load.
Method | Description |
---|---|
FocusAsync |
Focuses the Blazor Button component. Always call with await . Also check the dedicated KB article about programmatic input component focusing, which provides more examples and tips. |
<TelerikButton @ref="ButtonRef">Hello!</TelerikButton>
@code {
private Telerik.Blazor.Components.TelerikButton ButtonRef { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await ButtonRef.FocusAsync();
await base.OnAfterRenderAsync(firstRender);
}
}