Button

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

API Documentation

How it works #

The Button component provides styled buttons for various actions such as navigation, form submission, and resetting forms.

How to use:
  1. Add the Button component to your page.
  2. Set the Type property to ButtonType.Link, ButtonType.Submit, or ButtonType.Reset as needed.
  3. Customize the button label by setting the content between the opening and closing <Button> tags.
This demo shows how to create different types of buttons for common UI actions.
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 supports a variety of color options to match your application's theme or to indicate different actions.

How to use:
  1. Set the Color property to one of the available color values such as ButtonColor.White, ButtonColor.Light, ButtonColor.Dark, ButtonColor.Black, ButtonColor.Text, or ButtonColor.Ghost.
  2. Place your button label between the <Button> tags.
This demo displays the basic color options for the button component. 
<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>
Use semantic color options to indicate the purpose of each button, such as primary actions, links, information, success, warnings, or danger.

How to use:
  1. Set the Color property to ButtonColor.Primary, ButtonColor.Link, ButtonColor.Info, ButtonColor.Success, ButtonColor.Warning, or ButtonColor.Danger.
This demo shows how to apply semantic colors to buttons for better user guidance. 
<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>
The IsLightVersion property provides a lighter variant of the button color, useful for subtle emphasis or lighter backgrounds.

How to use:
  1. Set the IsLightVersion property to true on your Button component.
  2. Combine with the Color property for the desired color.
This demo demonstrates the light color variants for each button. 
<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>
The IsDarkVersion property provides a darker variant of the button color, ideal for dark themes or strong emphasis.

How to use:
  1. Set the IsDarkVersion property to true on your Button component.
  2. Combine with the Color property for the desired color.
This demo shows the dark color variants for each button. 
<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 supports multiple sizes to fit different UI needs, from small to large.

How to use:
  1. Set the Size property to ButtonSize.Small, ButtonSize.Normal, ButtonSize.Medium, or ButtonSize.Large as needed.
This demo shows how to use different button sizes. 
<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>
You can set the size for a group of buttons by applying the Size property to the Buttons container.

How to use:
  1. Wrap your Button components in a Buttons container.
  2. Set the Size property on the Buttons container to apply the size to all child buttons.
This demo shows a group of small 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>
This demo demonstrates a group of medium-sized buttons using the Size property on the Buttons container.

How to use:
  1. Wrap your Button components in a Buttons container.
  2. Set Size="ButtonSize.Medium" on the Buttons container.
<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>
This demo demonstrates a group of large buttons using the Size property on the Buttons container.

How to use:
  1. Wrap your Button components in a Buttons container.
  2. Set Size="ButtonSize.Large" on the Buttons container.
<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>
You can override the group size for individual buttons by setting the Size property on a specific Button inside a Buttons container.

How to use:
  1. Set the Size property on the Buttons container for a default group size.
  2. Override the size for any Button by setting its own Size property.
This demo shows a group of large buttons with one button using a custom size. 
<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 #

The IsFullWidth property makes a button expand to fill the width of its container, useful for responsive layouts or call-to-action buttons.

How to use:
  1. Set the IsFullWidth property to true on your Button component.
  2. Optionally, set the Size property for different button heights.
This demo shows buttons of various sizes set to full width. 
<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 #

The IsResponsive property allows buttons to automatically adjust their size based on the screen size, improving usability on different devices.

How to use:
  1. Set the IsResponsive property to true on your Button component.
  2. Combine with the Size property for more control over the default size.
This demo compares fixed-size and responsive-size buttons in a table layout.
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 #

The IsOutlined property gives buttons an outlined style, making them less prominent while still interactive.

How to use:
  1. Set the IsOutlined property to true on your Button component.
  2. Combine with the Color property for different outlined color styles.
This demo shows outlined buttons in various colors. 
<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>
The IsInverted property inverts the button's color scheme, making it suitable for use on colored backgrounds.

How to use:
  1. Set the IsInverted property to true on your Button component.
  2. Combine with the Color property for different inverted color styles.
This demo shows inverted buttons in various colors. 
<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>
The IsRounded property gives buttons fully rounded corners for a pill-shaped appearance.

How to use:
  1. Set the IsRounded property to true on your Button component.
  2. Combine with the Color property for different rounded color styles.
This demo shows rounded buttons in various colors. 
<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 IsLoading property displays a loading spinner inside the button, indicating that an action is in progress.

How to use:
  1. Set the IsLoading property to true on your Button component when an operation is running.
  2. Optionally, combine with the Color property for different loading button styles.
This demo shows loading buttons in various colors. 
<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 #

The IsDisabled property disables the button, preventing user interaction and visually indicating its inactive state.

How to use:
  1. Set the IsDisabled property to true on your Button component.
  2. Combine with the Color or Type property as needed.
This demo shows disabled buttons in various styles and colors.
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 #

The Button component supports click and double-click events, allowing you to handle user interactions with custom logic.

How to use:
  1. Attach an @onclick or @ondblclick event handler to your Button component.
  2. Define the corresponding event handler method in your @code block.
  3. You can also pass additional arguments to your event handler as needed.
This demo shows handling single click, double click, and click events with custom arguments. 
<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
    }
}
DO YOU KNOW?
This demo website is built using the BlazorExpress.Bulma library and published on the Azure Web App. See our source code on GitHub.
If you like BlazorExpress.Bulma, give it a star on GitHub!