Button - MikaBerglund/Blazor-Bootstrap GitHub Wiki

Button Component

The Button component in Bootstrap is probably one of the most vertsatile component, since it is used for so many things, from forms and dialogs to custom navigation etc.

See also ButtonGroup and ButtonToolbar for variations on grouping Button components.

Parameters

Name	Type	Description
IsActive	bool	Specifies if the button is active. An active button is visually slightly different from in inactive button. An inactive button must not be confused with a disabled button.
IsBlockLevel	bool	Specifies if the button is a block-level button.
IsDisabled	bool	Specifies if the button is disabled.
IsOutline	bool	Specifies if the button is just outlined and not filled with the configured color.
IsSubmit	bool	Specifies if the button is a submit button. A submit button is the default button on a form.
Size	ButtonSize?	Specifies the size of the button. The default size is `ButtonSize.Normal`.

Events

Name	Description
Clicked	Fires when the button is clicked.

Related Components

The following components are typically used toghether with the Button component.

Examples

Basic Usage

Basic usage examples of different kinds of buttons.

@using BlazorBootstrap.Components

<Button Color="NamedColor.Primary">Primary</Button>
<Button Color="NamedColor.Secondary">Secondary</Button>
<Button Color="NamedColor.Success">Success</Button>
<Button Color="NamedColor.Danger">Danger</Button>
<Button Color="NamedColor.Warning">Warning</Button>
<Button Color="NamedColor.Info">Info</Button>
<Button Color="NamedColor.Light">Light</Button>
<Button Color="NamedColor.Dark">Dark</Button>

Outline Buttons

Create more lightweight version of the standard coloured buttons with outline buttons.

<Button Color="NamedColor.Primary" IsOutline="true">
    Outline Button
</Button>

Button Sizes

Buttons can have different sizes.

<Button Size="ButtonSize.Large">Large</Button>
<Button>Normal</Button>
<Button Size="ButtonSize.Small">Small</Button>

Block-Level Buttons

With block-level buttons you can fill the entire horizontal space.

<Button IsBlockLevel="true">Block-Level Button</Button>

Button States

Buttons can have different states.

<Button Color="NamedColor.Primary" IsActive="true">Active</Button>
<Button Color="NamedColor.Primary" IsDisabled="true">Disabled</Button>

Button Groups

Buttons can be grouped togehter with a ButtonGroup component.

<ButtonGroup>
    <Button Color="NamedColor.Success">Left</Button>
    <Button Color="NamedColor.Info">Middle</Button>
    <Button Color="NamedColor.Warning">Right</Button>
</ButtonGroup>

Button Group Sizes

Button groups can be sized. Each button in the group will inherit the size of the group.

<ButtonGroup Size="ButtonSize.Large">
    <Button Color="NamedColor.Success">Left</Button>
    <Button Color="NamedColor.Info">Middle</Button>
    <Button Color="NamedColor.Warning">Right</Button>
</ButtonGroup>
<ButtonGroup Size="ButtonSize.Small">
    <Button Color="NamedColor.Success">Left</Button>
    <Button Color="NamedColor.Info">Middle</Button>
    <Button Color="NamedColor.Warning">Right</Button>
</ButtonGroup>

Button Toolbars

With the ButtonToolbar component you can wrap multiple ButtonGroup components into one unit for more advanced scenarios.

<ButtonToolbar>
    <ButtonGroup Size="ButtonSize.Large">
        <Button Color="NamedColor.Success">Left</Button>
        <Button Color="NamedColor.Info">Middle</Button>
        <Button Color="NamedColor.Warning">Right</Button>
    </ButtonGroup>
    <ButtonGroup Size="ButtonSize.Small" MarginLeft="Spacing.Two">
        <Button Color="NamedColor.Success">Left</Button>
        <Button Color="NamedColor.Info">Middle</Button>
        <Button Color="NamedColor.Warning">Right</Button>
    </ButtonGroup>
</ButtonToolbar>

Handling Clicks

Handling click events in a button.

@code {
    int count = 0;

    private void OnCountClick(MouseEventArgs args)
    {
        count++;
    }
}
<Button Color="NamedColor.Dark" IsOutline="true" Clicked="this.OnCountClick">
    Count:
    <Badge Color="NamedColor.Primary">@count</Badge>
</Button>