Button component

The button is an essential element of any design. It’s meant to look and behave as an interactive element of your page.

Basic button

To create a basic button you need to use a Button component.

<Button>Click me</Button>

How to use

To use button you just handle a button Clicked event.

<Button Clicked="@OnButtonClicked">Click me</Button>

@code{
    void OnButtonClicked()
    {
        Console.WriteLine( "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>

Note: To find the list of supported colors please look at the colors page.

Outline

To define button color use a Color attribute.

<Button Color="Color.Primary" Outline="true">Primary</Button>
<Button Color="Color.Secondary" Outline="true">Secondary</Button>
<Button Color="Color.Warning" Outline="true">Warning</Button>
<Button Color="Color.Danger" Outline="true">Danger</Button>

Block

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

Active

<Button Active="true">Primary</Button>
<Button Active="true">Secondary</Button>

Disabled

<Button Disabled="true">Primary</Button>
<Button Disabled="true">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 Loading="true">Primary</Button>
<Button Loading="true">
    <LoadingTemplate>Custom loading template</LoadingTemplate>
    <ChildContent>Primary</ChildContent>
</Button>

Button group

If you want to group buttons together on a single line, use the Buttons tag.

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

Special cases

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="true">
        <FieldLabel ColumnSize="ColumnSize.Is2">Name</FieldLabel>
        <FieldBody ColumnSize="ColumnSize.Is10">
            <TextEdit Placeholder="Some text value..." />
        </FieldBody>
    </Field>
    <Button Type="ButtonType.Submit" PreventDefaultOnSubmit="true">Submit</Button>
</Form>

Attributes

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