Blazor Buttons

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

Parameters

Name	Type	Description	Required	Default	Added Version
Active	bool	When set to true, places the component in the active state with active styling.		false	1.0.0
Block	bool	Makes the button to span the full width of a parent.		false	1.0.0
ChildContent	RenderFragment	Specifies the content to be rendered inside this Button.			1.0.0
Color	ButtonColor	Gets or sets the button color.	✔️		1.0.0
Disabled	bool	When set to true, disables the component's functionality and places it in a disabled state.		false	1.0.0
Loading	bool	Shows the loading spinner or a LoadingTemplate.		false	1.0.0
LoadingTemplate	RenderFragment	Gets or sets the component loading template.			1.0.0
LoadingText	string	Gets or sets the loadgin text.		Loading...	1.0.0
Outline	bool	Makes the button to have the outlines.		false	1.0.0
Position	Position	Gets or sets the position.			1.7.0
Size	Size	Changes the size of a button.			1.0.0
TabIndex	int?	If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.			1.0.0
Target	Target	The target attribute specifies where to open the linked document for a ButtonType.Link.		Target.None	1.0.0
To	string	Denotes the target route of the ButtonType.Link button.			1.0.0
TooltipPlacement	TooltipPlacement	Tooltip placement		TooltipPlacement.Top	1.0.0
TooltipTitle	string	Displays informative text when users hover, focus, or tap an element.			1.0.0
TooltipColor	TooltipColor	Gets or sets the tooltip color.		TooltipColor.None	1.10.0
Type	ButtonType	Defines the button type.		ButtonType.Button	1.0.0

Methods

Name	Description
ShowLoading	Shows the loading state and disables the button.
HideLoading	Hides the loading state and enables the button.

Examples

Buttons

Blazor Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<p>
    <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>
</p>

See buttons demo here.

Button tags

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

See button tags demo here.

Outline Buttons

<p>
    <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>
</p>

See outline button demo here.

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="Size.Large" or Size="Size.Small" for additional sizes.

<p>
    <Button Color="ButtonColor.Primary" Size="Size.Large"> Large button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Large"> Large button </Button>
</p>
<p>
    <Button Color="ButtonColor.Primary" Size="Size.Small"> Small button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Small"> Small button </Button>
</p>

See buttons with different size demo here.

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.

info

Disabled buttons using the Type="ButtonType.Link" parameter behave a bit different.

<p>
    <Button Color="ButtonColor.Primary" Size="Size.Large" Disabled="true"> Large button </Button>
    <Button Color="ButtonColor.Secondary" Size="Size.Large" Disabled="true"> Large button </Button>
</p>
<p>
    <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>
</p>

See button disabled state demo here.

Disable and enable state dynamically

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

See disable and enable state dynamically demo here.

Block Buttons

Create responsive stacks of full-width, "block buttons" like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.

<div class="d-grid gap-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>

<div class="d-grid gap-2 d-md-block mt-2">
    <Button Color="ButtonColor.Primary"> Button </Button>
    <Button Color="ButtonColor.Primary"> Button </Button>
</div>

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

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

See block buttons demo here.

Toggle States

If you''re pre-toggling a button, you must manually add the Active="true" parameter.

<p>
    <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>
</p>

See button toggle states demo here.

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.

<p>
    <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>
</p>

See button with loading spinner demo here.

Show/Hide loading spinner

Use ShowLoading() and HideLoading() methods to toggle the button state.

<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

        saveButton?.HideLoading();
    }
}

See button with loading spinner demo here.

Show Tooltip

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

<p>
    <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>
</p>

See button with tooltip demo here.

NOTE

HTML tooltips not supported at this moment.

Dynamically update the tooltip text

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

See demo here.

Events

Click events

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

@code{

    protected void OnClick(EventArgs args)
    {
        Console.WriteLine("click event");
    }

}

Double click event

<p>
    <Button Color="ButtonColor.Primary" @ondblclick="OnDoubleClick"> Double Click Event </Button>
</p>

@code{

    protected void OnDoubleClick(EventArgs args)
    {
        Console.WriteLine("double click event");
    }

}

Click event with arguments

<p>
    <Button Color="ButtonColor.Primary" @onclick="((args) => OnClickWithArgs(args, message))"> Click   Args </Button>
</p>

@code{

    public string message = "Test message";

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

}

See button click events demo here.