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.
The Button component is part of Telerik UI for Blazor, a
professional grade UI library with 60+ 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
@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
Change the button size
<style>
.large-button {
width: 200px;
height: 50px;
}
</style>
<TelerikButton Class="large-button">Large button</TelerikButton>
The result from the code snippet above
