Blazor Buttons

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

Examples#

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
Razor 
<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#

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

Outline buttons#

Razor 
<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.Light" Outline="true"> Light </Button>
<Button Color="ButtonColor.Dark" Outline="true"> Dark </Button>
INFO
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.

Sizes#

Fancy larger or smaller buttons? Add Size="ButtonSize.Large" or Size="ButtonSize.Small" for additional sizes.
Razor 
<Button Color="ButtonColor.Primary" Size="ButtonSize.Large"> Large button </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.Large"> Large button </Button>
Razor 
<Button Color="ButtonColor.Primary" Size="ButtonSize.Small"> Small button </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.Small"> Small button </Button>
Razor 
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraLarge"> Extra large button </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.Large"> Large button </Button>
<Button Color="ButtonColor.Success" Size="ButtonSize.Medium"> Medium button </Button>
<Button Color="ButtonColor.Danger" Size="ButtonSize.Small"> Small button </Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall"> Extra 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.
NOTE
Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different.
Razor 
<Button Color="ButtonColor.Primary" Size="ButtonSize.Large" Disabled="true"> Large button </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.Large" Disabled="true"> Large button </Button>
Primary link Link
Razor 
<Button Type="ButtonType.Link" Color="ButtonColor.Primary" Size="ButtonSize.Large" Disabled="true"> Primary link </Button>
<Button Type="ButtonType.Link" Color="ButtonColor.Secondary" Size="ButtonSize.Large" Disabled="true"> Link </Button>

Disable and enable state dynamically#

Link Button
Razor 
<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>

@code
{
    bool disableButton = true;
    string tooltip = "";

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

Block buttons#

Razor 
<div class="d-grid gap-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>
Razor 
<div class="d-grid gap-2 d-md-block mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>
Razor 
<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>
Razor 
<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>
</div>

Toggle states#

Razor 
<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>
Toggle button Active toggle button Disabled toggle button
Razor 
<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.
Razor 
<Button Color="ButtonColor.Primary" Loading="true" />
<Button Color="ButtonColor.Primary" Loading="true" LoadingText="Saving..." />
<Button Color="ButtonColor.Primary" Loading="true">
    <LoadingTemplate>
        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
        Loading...
    </LoadingTemplate>
</Button>

Show/Hide loading spinner#

Show Tooltip#

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
Razor 
<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#

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

<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()}";
}

Custom tooltips#

Blazor Bootstrap includes several predefined tooltip styles, each serving its own semantic purpose. The TooltipColor parameter can be used to customize the color of the tooltip.
Razor 
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.None"> Default Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Primary"> Primary Tooltip  </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Secondary"> Secondary Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Success"> Success Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Danger"> Danger Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Warning">Warning Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Info"> Info Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Light"> Light Tooltip </Button>
<Button Color="ButtonColor.Light" TooltipTitle="This top tooltip is themed via TooltipColor parameter." TooltipPlacement="TooltipPlacement.Top" TooltipColor="TooltipColor.Dark"> Dark Tooltip </Button>
WARNING
Support for HTML tooltips is not available at this moment.

Click events#

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

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

@code {
    protected void OnDoubleClick(EventArgs args)
    {
        Console.WriteLine("double click event");
    }
}
Razor 
<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}");
    }
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v3.0.0-preview.3.
Links
Guides
Community