Blazor Buttons

Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.


Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<Button Color="ButtonColor.Primary"> Primary </Button>
<Button Color="ButtonColor.Secondary"> Secondary </Button>
<Button Color="ButtonColor.Success"> Success </Button>
<Button Color="ButtonColor.Danger"> Danger </Button>
<Button Color="ButtonColor.Warning"> Warning </Button>
<Button Color="ButtonColor.Info"> Info </Button>
<Button Color="ButtonColor.Light"> Light </Button>
<Button Color="ButtonColor.Dark"> Dark </Button>
<Button Color="ButtonColor.Link"> Link </Button>

Button tags#

<Button Type="ButtonType.Link" Color="ButtonColor.Primary" To="#"> Link </Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Primary" To="#"> Button </Button>

Outline buttons#

<Button Color="ButtonColor.Primary" Outline="true"> Primary </Button>
<Button Color="ButtonColor.Secondary" Outline="true"> Secondary </Button>
<Button Color="ButtonColor.Success" Outline="true"> Success </Button>
<Button Color="ButtonColor.Danger" Outline="true"> Danger </Button>
<Button Color="ButtonColor.Warning" Outline="true"> Warning </Button>
<Button Color="ButtonColor.Info" Outline="true"> Info </Button>
<Button Color="ButtonColor.Dark" Outline="true"> Dark </Button>
Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.


Fancy larger or smaller buttons? Add Size="Size.Large" or Size="Size.Small" for additional sizes.
<Button Color="ButtonColor.Primary" Size="Size.Large"> Large button </Button>
<Button Color="ButtonColor.Secondary" Size="Size.Large"> Large button </Button>
<Button Color="ButtonColor.Primary" Size="Size.Small"> Small button </Button>
<Button Color="ButtonColor.Secondary" Size="Size.Small"> Small button </Button>

Disabled state#

Make buttons look inactive by adding the Disabled="true" boolean parameter to any Button component. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.
Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different.
<Button Color="ButtonColor.Primary" Size="Size.Large" Disabled="true"> Large button </Button>
<Button Color="ButtonColor.Secondary" Size="Size.Large" Disabled="true"> Large button </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" Size="Size.Large" Disabled="true"> Primary link </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Secondary" Size="Size.Large" Disabled="true"> Link </Button>

Disable and enable state dynamically#

Link Button
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Link Button</Button>
<Button Type="ButtonType.Submit" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Submit Button</Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Button</Button>
<Button Type="ButtonType.Reset" Color="ButtonColor.Primary" Disabled="@disableButton" TooltipTitle="@tooltip">Reset Button</Button>

<Button Color="ButtonColor.Danger" @onclick="() => SwapDisable()">Swap Disable</Button>

    bool disableButton = true;
    string tooltip = "";

    public void SwapDisable()
        disableButton = !disableButton;
        tooltip = $"Updated at {DateTime.Now}";

Block buttons#

<div class="d-grid gap-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
<div class="d-grid gap-2 d-md-block mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
<div class="d-grid gap-2 col-6 mx-auto mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
<div class="d-grid gap-2 d-md-flex justify-content-md-end mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>

Toggle states#

<Button Color="ButtonColor.Primary"> Toggle button </Button>
<Button Color="ButtonColor.Primary" Active="true"> Active toggle button </Button>
<Button Color="ButtonColor.Primary" Disabled="true"> Disabled toggle button </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" To="#"> Toggle button </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" To="#" Active="true"> Active toggle button </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" To="#" Disabled="true"> Disabled toggle button </Button>

Loading spinner#

Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.
<Button Color="ButtonColor.Primary" Loading="true" />
<Button Color="ButtonColor.Primary" Loading="true" LoadingText="Saving..." />
<Button Color="ButtonColor.Primary" Loading="true">
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>

Show/Hide loading spinner#

<Button @ref="saveButton" Color="ButtonColor.Primary" @onclick="async () => await OnSaveClick()">Save</Button>

@code {
    private Button saveButton;

    private async Task OnSaveClick()
        saveButton?.ShowLoading("Saving details...");

        await Task.Delay(5000); // API call


Show Tooltip#

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Top"> Tooltip Top </Button>

<Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Right"> Tooltip Right </Button>

<Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Bottom"> Tooltip Bottom </Button>

<Button Color="ButtonColor.Primary" TooltipTitle="Tooltip text" TooltipPlacement="TooltipPlacement.Left"> Tooltip Left </Button>

Dynamically update the tooltip text#

<div class="mb-3">
    <Button Color="ButtonColor.Primary" TooltipTitle="@text" TooltipPlacement="TooltipPlacement.Top"> Tooltip Top </Button>

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="ChangeTooltip">Change Tooltip</Button>

@code {
    private string text = "Tooltip text";

    private void ChangeTooltip() => text = $"Updated {DateTime.Now.ToLongTimeString()}";
Support for HTML tooltips is not available at this moment.

Click events#

<Button Color="ButtonColor.Primary" @onclick="OnClick"> Click here </Button>

@code {
    protected void OnClick(EventArgs args)
        Console.WriteLine("click event");
<Button Color="ButtonColor.Primary" @ondblclick="OnDoubleClick"> Double click here </Button>

@code {
    protected void OnDoubleClick(EventArgs args)
        Console.WriteLine("double click event");
<Button Color="ButtonColor.Primary" @onclick="((args) => OnClickWithArgs(args, message))"> Click event with args </Button>

@code {
    public string message = "Test message";

    protected void OnClickWithArgs(EventArgs args, string message)
        Console.WriteLine($"message: {message}");