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 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

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

  2. Handle the OnClick event to respond to the user action.

Basic Blazor Button with OnClick event handler

@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 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 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);
    }
}

Next Steps

See Also

In this article