Button Overview

This article provides information about the 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.

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

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

@code{
    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

Styling

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>

<style>
    .RedText,
    .RedText:hover {
        color: red;
    }
</style>

The result from the code snippet above

See Also

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