Button component
This article demonstrates how to use RadzenButton.
Basic usage
The most basic configuration of RadzenButton is to set its Text
property and handle the Click
event.
<RadzenButton Click=@OnSave Text="Save" />
@code {
void OnSave()
{
// Implementation
}
}
Button types
RadzenButton can also submit or reset forms. Use the ButtonType
property for that.
<RadzenButton ButtonType="ButtonType.Submit" />
Appearance
By default RadzenButton renders as a regular button with text. You can change the appearance in various ways.
Icons and images
You can specify an icon or a custom image which RadzenButton will display before the text.
Custom content
RadzenButton can also have entirely custom child content.
<RadzenButton>
Some text
<RadzenImage Path="images/radzen-nuget.png" Style="width:20px;margin-left: 10px;" />
</RadzenButton>
Styles
RadzenButton comes with a predefined set of styles (background and text colors):
<RadzenButton ButtonStyle="ButtonStyle.Primary" />
Busy indicator
A common usage scanrio is to display busy (or loading) icon to show that a task is running. RadzenButton supports it out of the box
via the IsBusy
property. Setting it to true
displays the loading icon.
<RadzenButton IsBusy=@busy Click=@OnBusyClick Text="Save" />
@code {
bool busy;
async Task OnBusyClick()
{
busy = true;
// Use await and Task.Delay to yield execution to Blazor and refresh the UI
await Task.Delay(2000);
// Set the busy flag to false after the long task is done
busy = false;
}
}