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 100 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.Add an
OnClickevent handler to show the current date and time.
Basic Blazor Button with OnClick event handler
@result
<br />
<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>
@code {
string result;
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 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 and implement custom CSS rules. Read more about the Blazor Button styling...
Button Reference
Add a reference to the Button instance to use its methods (for example - FocusAsync()). Be aware of the Blazor life cycle if you want to focus the component on page load.
Component namespace and reference
<TelerikButton @ref="theButton">Hello!</TelerikButton>
@code{
Telerik.Blazor.Components.TelerikButton theButton { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await theButton.FocusAsync();
await base.OnAfterRenderAsync(firstRender);
}
}
Next Steps
The result from the code snippet above
