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 SimpleButton component.

<SimpleButton>Click me</SimpleButton>

How to use

To use button you just handle a button Clicked event.

<SimpleButton Clicked="@OnButtonClicked">Click me</SimpleButton>
@functions{
    void OnButtonClicked()
    {
        Console.WriteLine( "Hello world!" );
    }
}

Colored

To define button color use a Color attribute.

<SimpleButton Color="Color.Primary">Primary</SimpleButton>
<SimpleButton Color="Color.Secondary">Secondary</SimpleButton>
<SimpleButton Color="Color.Warning">Warning</SimpleButton>
<SimpleButton Color="Color.Danger">Danger</SimpleButton>

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

Outlined

To define button color use a Color attribute.

<SimpleButton Color="Color.Primary" IsOutline="true">Primary</SimpleButton>
<SimpleButton Color="Color.Secondary" IsOutline="true">Secondary</SimpleButton>
<SimpleButton Color="Color.Warning" IsOutline="true">Warning</SimpleButton>
<SimpleButton Color="Color.Danger" IsOutline="true">Danger</SimpleButton>

Blocked

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

Active

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

Disabled

<SimpleButton IsDisabled="true">Primary</SimpleButton>
<SimpleButton IsDisabled="true">Secondary</SimpleButton>

Button group

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

<Buttons>
    <SimpleButton Color="Color.Secondary">LEFT</SimpleButton>
    <SimpleButton Color="Color.Secondary">CENTER</SimpleButton>
    <SimpleButton Color="Color.Secondary">RIGHT</SimpleButton>
</Buttons>

Toolbar

To attach buttons together use a Toolbar role.

<Buttons Role="ButtonsRole.Toolbar">
    <Buttons Margin="Margin.Is2.FromRight">
        <SimpleButton Color="Color.Primary">Primary</SimpleButton>
        <SimpleButton Color="Color.Secondary">Secondary</SimpleButton>
        <SimpleButton Color="Color.Info">Info</SimpleButton>
    </Buttons>
    <Buttons>
        <SimpleButton Color="Color.Danger">Danger</SimpleButton>
        <SimpleButton Color="Color.Warning">Warning</SimpleButton>
    </Buttons>
    <Buttons Margin="Margin.Is2.OnX">
        <SimpleButton Color="Color.Success">Success</SimpleButton>
    </Buttons>
</Buttons>

Attributes

Name Type Default Description
Color Colors None Component visual or contextual style variants
Size ButtonSize None Button size variations
Clicked event    
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.