Button

Use the Button component to style actions in forms, dialogs, and more, with support for multiple sizes, states, and other options.

API Documentation

Example #

The Button component can be used like link, button, submit button, and reset button.
Anchor 
<Button Type="ButtonType.Link">Anchor</Button>
<Button>Button</Button>
<Button Type="ButtonType.Submit">Submit</Button>
<Button Type="ButtonType.Reset">Reset</Button>

Colors #

The Button component is available in a variety of colors. You can use the Color parameter to set the color of the button. 
<Button Color="ButtonColor.White">White</Button>
<Button Color="ButtonColor.Light">Light</Button>
<Button Color="ButtonColor.Dark">Dark</Button>
<Button Color="ButtonColor.Black">Black</Button>
<Button Color="ButtonColor.Text">Text</Button>
<Button Color="ButtonColor.Ghost">Ghost</Button>

<Button Color="ButtonColor.Primary">Primary</Button>
<Button Color="ButtonColor.Link">Link</Button>
<Button Color="ButtonColor.Info">Info</Button>
<Button Color="ButtonColor.Success">Success</Button>
<Button Color="ButtonColor.Warning">Warning</Button>
<Button Color="ButtonColor.Danger">Danger</Button>
Use IsLightVersion parameter to set the light version of the button with the Color parameter. 
<Button Color="ButtonColor.Primary" IsLightVersion="true">Primary</Button>
<Button Color="ButtonColor.Link" IsLightVersion="true">Link</Button>
<Button Color="ButtonColor.Info" IsLightVersion="true">Info</Button>
<Button Color="ButtonColor.Success" IsLightVersion="true">Success</Button>
<Button Color="ButtonColor.Warning" IsLightVersion="true">Warning</Button>
<Button Color="ButtonColor.Danger" IsLightVersion="true">Danger</Button>
Use IsDarkVersion parameter to set the dark version of the button with the Color parameter. 
<Button Color="ButtonColor.Primary" IsDarkVersion="true">Primary</Button>
<Button Color="ButtonColor.Link" IsDarkVersion="true">Link</Button>
<Button Color="ButtonColor.Info" IsDarkVersion="true">Info</Button>
<Button Color="ButtonColor.Success" IsDarkVersion="true">Success</Button>
<Button Color="ButtonColor.Warning" IsDarkVersion="true">Warning</Button>
<Button Color="ButtonColor.Danger" IsDarkVersion="true">Danger</Button>

Sizes #

The Button component is available in 4 sizes: Small, Normal, Medium, and Large. Default value is Normal. 
<Buttons>
    <Button Size="ButtonSize.Small">Small</Button>
    <Button>Default</Button>
    <Button Size="ButtonSize.Normal">Normal</Button>
    <Button Size=" ButtonSize.Medium">Medium</Button>
    <Button Size=" ButtonSize.Large">Large</Button>
</Buttons>
<Buttons Size="ButtonSize.Small">
    <Button Color="ButtonColor.Primary">Primary</Button>
    <Button Color="ButtonColor.Link">Link</Button>
    <Button Color="ButtonColor.Info">Info</Button>
    <Button Color="ButtonColor.Success">Success</Button>
    <Button Color="ButtonColor.Warning">Warning</Button>
    <Button Color="ButtonColor.Danger">Danger</Button>
</Buttons>
<Buttons Size="ButtonSize.Medium">
    <Button Color="ButtonColor.Primary">Primary</Button>
    <Button Color="ButtonColor.Link">Link</Button>
    <Button Color="ButtonColor.Info">Info</Button>
    <Button Color="ButtonColor.Success">Success</Button>
    <Button Color="ButtonColor.Warning">Warning</Button>
    <Button Color="ButtonColor.Danger">Danger</Button>
</Buttons>
<Buttons Size="ButtonSize.Large">
    <Button Color="ButtonColor.Primary">Primary</Button>
    <Button Color="ButtonColor.Link">Link</Button>
    <Button Color="ButtonColor.Info">Info</Button>
    <Button Color="ButtonColor.Success">Success</Button>
    <Button Color="ButtonColor.Warning">Warning</Button>
    <Button Color="ButtonColor.Danger">Danger</Button>
</Buttons>
<Buttons Size="ButtonSize.Large">
    <Button Color="ButtonColor.Primary">Primary</Button>
    <Button Color="ButtonColor.Link">Link</Button>
    <Button Color="ButtonColor.Info">Info</Button>
    <Button Color="ButtonColor.Success">Success</Button>
    <Button Color="ButtonColor.Warning" Size="ButtonSize.Normal">Warning</Button>
    <Button Color="ButtonColor.Danger">Danger</Button>
</Buttons>

Full width #

Use IsFullWidth parameter to set the full width of the button. The button will take the full width of its parent container. 
<Buttons>
    <Button Size="ButtonSize.Small" IsFullWidth="true">Small</Button>
    <Button IsFullWidth="true">Default</Button>
    <Button Size="ButtonSize.Normal" IsFullWidth="true">Normal</Button>
    <Button Size=" ButtonSize.Medium" IsFullWidth="true">Medium</Button>
    <Button Size=" ButtonSize.Large" IsFullWidth="true">Large</Button>
</Buttons>

Responsive sizes #

Name Fixed size Responsive size
Default
Small
Normal
Medium
Large 
<div class="table-container">
    <table class="table is-bordered">
        <thead>
            <tr>
                <td>Name</td>
                <td>Fixed size</td>
                <td>Responsive size</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Default</td>
                <td><Button>Default</Button></td>
                <td><Button IsResponsive="true">Default</Button></td>
            </tr>
            <tr>
                <td>Small</td>
                <td><Button Size="ButtonSize.Small">Small</Button></td>
                <td><Button Size="ButtonSize.Small" IsResponsive="true">Small</Button></td>
            </tr>
            <tr>
                <td>Normal</td>
                <td><Button Size="ButtonSize.Normal">Normal</Button></td>
                <td><Button Size="ButtonSize.Normal" IsResponsive="true">Normal</Button></td>
            </tr>
            <tr>
                <td>Medium</td>
                <td><Button Size="ButtonSize.Medium">Medium</Button></td>
                <td><Button Size="ButtonSize.Medium" IsResponsive="true">Medium</Button></td>
            </tr>
            <tr>
                <td>Large</td>
                <td><Button Size="ButtonSize.Large">Large</Button></td>
                <td><Button Size="ButtonSize.Large" IsResponsive="true">Large</Button></td>
            </tr>
        </tbody>
    </table>
</div>

Styles #

<Button Color="ButtonColor.Primary" IsOutlined="true">Primary</Button>
<Button Color="ButtonColor.Link" IsOutlined="true">Link</Button>
<Button Color="ButtonColor.Info" IsOutlined="true">Info</Button>
<Button Color="ButtonColor.Success" IsOutlined="true">Success</Button>
<Button Color="ButtonColor.Warning" IsOutlined="true">Warning</Button>
<Button Color="ButtonColor.Danger" IsOutlined="true">Danger</Button>

<Button Color="ButtonColor.Primary" IsInverted="true">Primary</Button>
<Button Color="ButtonColor.Link" IsInverted="true">Link</Button>
<Button Color="ButtonColor.Info" IsInverted="true">Info</Button>
<Button Color="ButtonColor.Success" IsInverted="true">Success</Button>
<Button Color="ButtonColor.Warning" IsInverted="true">Warning</Button>
<Button Color="ButtonColor.Danger" IsInverted="true">Danger</Button>

<Button Color="ButtonColor.Primary" IsRounded="true">Primary</Button>
<Button Color="ButtonColor.Link" IsRounded="true">Link</Button>
<Button Color="ButtonColor.Info" IsRounded="true">Info</Button>
<Button Color="ButtonColor.Success" IsRounded="true">Success</Button>
<Button Color="ButtonColor.Warning" IsRounded="true">Warning</Button>
<Button Color="ButtonColor.Danger" IsRounded="true">Danger</Button>

Loading #

The Button component can be used to show a loading state. Set IsLoading parameter to true to show the loading state. 
<Buttons>
    <Button IsLoading="true">Primary</Button>
    <Button Color="ButtonColor.Primary" IsLoading="true">Primary</Button>
    <Button Color="ButtonColor.Link" IsLoading="true">Link</Button>
    <Button Color="ButtonColor.Info" IsLoading="true">Info</Button>
    <Button Color="ButtonColor.Success" IsLoading="true">Success</Button>
    <Button Color="ButtonColor.Warning" IsLoading="true">Warning</Button>
    <Button Color="ButtonColor.Danger" IsLoading="true">Danger</Button>
</Buttons>

Disabled #

Set IsDisabled parameter to true to disable the button.
Anchor 
<Buttons>
    <Button Type="ButtonType.Link" IsDisabled="true">Anchor</Button>
    <Button IsDisabled="true">Default</Button>
    <Button Color="ButtonColor.Primary" IsDisabled="true">Primary</Button>
    <Button Color="ButtonColor.Link" IsDisabled="true">Link</Button>
    <Button Color="ButtonColor.Info" IsDisabled="true">Info</Button>
    <Button Color="ButtonColor.Success" IsDisabled="true">Success</Button>
    <Button Color="ButtonColor.Warning" IsDisabled="true">Warning</Button>
    <Button Color="ButtonColor.Danger" IsDisabled="true">Danger</Button>
</Buttons>

Click events #

<Buttons>
    <Button Color="ButtonColor.Primary" @onclick="OnClick">Click here</Button>
    <Button Color="ButtonColor.Link" @ondblclick="OnDoubleClick">Double click here</Button>
    <Button Color="ButtonColor.Info" @onclick="((args) => OnClickWithArgs(args, message))">Click event with args</Button>
</Buttons>

@code {
    public string message = "Test message";

    protected void OnClick(EventArgs args)
    {
        // handle click event
    }

    protected void OnDoubleClick(EventArgs args)
    {
        // handle double click event
    }
    protected void OnClickWithArgs(EventArgs args, string message)
    {
        // handle click event with custom params
    }
}
If you like BlazorExpress.Bulma, give it a star on GitHub!