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" IsOutline="true">Primary</Button>
<Button Color="Color.Secondary" IsOutline="true">Secondary</Button>
<Button Color="Color.Warning" IsOutline="true">Warning</Button>
<Button Color="Color.Danger" IsOutline="true">Danger</Button>

Block

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

Active

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

Disabled

<Button IsDisabled="true">Primary</Button>
<Button IsDisabled="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 behaviour. Because of this a new attribute is introduced to the <Button> element, called PreventDefaultOnSubmit. Basically it prevents a default browser behaviour 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 IsHorizontal="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.
IsOutline boolean false Outlined button.
IsDisabled boolean false Makes button look inactive.
IsActive boolean false Makes the button to appear as pressed.
IsBlock boolean false Makes the button to span the full width of a parent.
IsLoading boolean false Shows the loading spinner.
PreventDefaultOnSubmit boolean false Prevents the button from submiting the form.