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.

Telerik UI for Blazor Ninja image

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

  1. Use the <TelerikButton> tag to add the component to your razor page.

  2. Add an OnClick event 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...

To learn more about the appearance, anatomy, and accessibility of the Button, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

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

use css to change the button size

See Also

In this article