Button Overview

This article provides information about the Blazor Button component and its core features.

The Button component provides styling according to the chosen theme, click event and icons. You can also disable the button and set its type.

Telerik UI for Blazor Ninja image

The Button component is part of Telerik UI for Blazor, a professional grade UI library with 90 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

In this article:

Basic Button

To add a Telerik Button to your Blazor app, use the <TelerikButton> tag:

Basic Telerik Button with OnClick event handling

<br />
<TelerikButton OnClick="@OnClickHandler">Hello!</TelerikButton>

@code {
    string result;

    async Task OnClickHandler()
        result = DateTime.Now.ToString();

The result from the code snippet above

Component namespace and reference

@using Telerik.Blazor.Components

<TelerikButton @ref="theButton">Hello!</TelerikButton>

    Telerik.Blazor.Components.TelerikButton theButton;

Primary Button

You can also make the button use a strong color to attact attention, called Primary button styling. To do that, set its Primary property to true.

Button with the Primary color scheme from the current theme

<TelerikButton Primary="true">Primary</TelerikButton>

The result from the code snippet above, with the Default theme

Disabled State

To disable a button, set its Enabled attribute to false.

Disabled Telerik Button

<TelerikButton Enabled="false">Disabled Button</TelerikButton>

Comparison between disabled and enabled button


You can style the button through its Class attribute to define your own CSS rules that apply to the HTML rendering.

Set CSS class to the button and change its appearance

<TelerikButton Class="RedText">My text is red.</TelerikButton>

    .RedText:hover {
        color: red;

The result from the code snippet above

Change the button size

    .large-button {
        width: 200px;
        height: 50px;

<TelerikButton Class="large-button">Large button</TelerikButton>

The result from the code snippet above

use css to change the button size

See Also

In this article
Not finding the help you need? Improve this article