Buttons

Use Blazorise <Button> component for actions in forms, dialogs, and more. Includes support for a handful of contextual variations, sizes, states, and more.

Overview

Blazorise <Button> component generates either a <button> element, or <a> element with the styling of a button.

Basic button

To create a basic button you need to use a Button component.
<Button Color="Color.Primary">Click me</Button>

How to use

To use button you just handle a button Clicked event.
<Button Color="Color.Primary" Clicked="@OnButtonClicked">Click me</Button>
@code{
    [Inject] INotificationService NotificationService { get; set; }

    Task OnButtonClicked()
    {
        return NotificationService.Info( "Hello world!" );
    }
}

Colors

To define button color use a Color attribute.
<Button Color="Color.Primary">Primary</Button>
<Button Color="Color.Secondary">Secondary</Button>
<Button Color="Color.Success">Success</Button>
<Button Color="Color.Warning">Warning</Button>
<Button Color="Color.Danger">Danger</Button>
<Button Color="Color.Info">Info</Button>
<Button Color="Color.Light">Light</Button>
<Button Color="Color.Dark">Dark</Button>
<Button>None</Button>

Outline

To define button color with a borders use an Outline attribute.
<Button Color="Color.Primary" Outline>Primary</Button>
<Button Color="Color.Secondary" Outline>Secondary</Button>
<Button Color="Color.Success" Outline>Success</Button>
<Button Color="Color.Warning" Outline>Warning</Button>
<Button Color="Color.Danger" Outline>Danger</Button>
<Button Color="Color.Info" Outline>Info</Button>
<Button Color="Color.Light" Outline>Light</Button>
<Button Color="Color.Dark" Outline>Dark</Button>
<Button Outline>None</Button>

Block

<Button Color="Color.Primary" Block>Blocked primary</Button>
<Button Color="Color.Secondary" Block>Blocked secondary</Button>

Active

<Button Color="Color.Primary" Active>Primary</Button>
<Button Color="Color.Secondary" Active>Secondary</Button>

Disabled

<Button Color="Color.Primary" Disabled>Primary</Button>
<Button Color="Color.Secondary" Disabled>Secondary</Button>

Loading

Use Loading attribute to add spinners within buttons to indicate an action is currently processing or taking place. Use <LoadingTemplate> to add a custom loading template
<Button Color="Color.Primary" Loading>Primary</Button>
<Button Color="Color.Primary" Clicked="@ShowLoading" Loading="@isLoading">
    <LoadingTemplate>
        This is a custom loading template
    </LoadingTemplate>
    <ChildContent>
        Click to load
    </ChildContent>
</Button>
@code{
    private bool isLoading;

    private async Task ShowLoading()
    {
        isLoading = true;

        await Task.Delay( TimeSpan.FromSeconds( 3 ) );

        isLoading = false;
    }
}

Button group

If you want to group buttons together on a single line, use the <Buttons> xomponent.
<Buttons>
    <Button Color="Color.Secondary">LEFT</Button>
    <Button Color="Color.Secondary">CENTER</Button>
    <Button Color="Color.Secondary">RIGHT</Button>
</Buttons>

Link Button

By default, <Button> works with <button> element, but you can also create an <a> element that will still appear as regular button.
<Button Color="Color.Primary" Type="ButtonType.Link" To="#">Primary link</Button>
<Button Color="Color.Secondary" Type="ButtonType.Link" To="#" Target="Target.Blank">Secondary link</Button>

Toolbar

To attach buttons together use a ButtonsRole.Toolbar role.
<Buttons Role="ButtonsRole.Toolbar">
    <Buttons Margin="Margin.Is2.FromRight">
        <Button Color="Color.Primary">Primary</Button>
        <Button Color="Color.Secondary">Secondary</Button>
        <Button Color="Color.Info">Info</Button>
    </Buttons>
    <Buttons>
        <Button Color="Color.Danger">Danger</Button>
        <Button Color="Color.Warning">Warning</Button>
    </Buttons>
    <Buttons Margin="Margin.Is2.OnX">
        <Button Color="Color.Success">Success</Button>
    </Buttons>
</Buttons>

Submit button

When using a submit button inside of <Form> element the browser will automatically try to post the page. This is the default browser behavior. Because of this a new attribute is introduced to the <Button> element, called PreventDefaultOnSubmit. Basically it prevents a default browser behavior when clicking the submit button. So instead of posting the page it will stop it and just call the Clicked event handler. Pressing the Enter key will still work just as it’s supposed to do.
<Form>
    <Field Horizontal>
        <FieldLabel ColumnSize="ColumnSize.Is2">Name</FieldLabel>
        <FieldBody ColumnSize="ColumnSize.Is10">
            <TextEdit Placeholder="Some text value..." />
        </FieldBody>
    </Field>
    <Field>
        <Button Color="Color.Primary" Type="ButtonType.Submit" PreventDefaultOnSubmit="true">Submit</Button>
    </Field>
</Form>

Attributes

Name Description Type Default
Color Component visual or contextual style variants. Color None
Size Button size variations. Size None
Type Defines the button type. Type Button
Clicked Occurs when the button is clicked. EventCallback
Outline Outlined button. bool false
Disabled Makes button look inactive. bool false
Active Makes the button to appear as pressed. bool false
Block Makes the button to span the full width of a parent. bool false
Loading Shows the loading spinner. bool false
LoadingTemplate Changes the default loading spinner to custom content. RenderFragment Loading spinner
Command Command to be executed when clicked on a button. ICommand null
CommandParameter Reflects the parameter to pass to the CommandProperty upon execution. object null
PreventDefaultOnSubmit Prevents the button from submitting the form. bool false