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>

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>

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 Colors None Component visual or contextual style variants
Size ButtonSize 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.
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.