Buttons

Customizable buttons for actions in forms, dialogs, and more.

Examples

aspnet


<bs-button stack="this.Html.GetStack()" btn-style="Primary">Primary</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Secondary">Secondary</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Success">Success</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Danger">Danger</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Warning">Warning</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Info">Info</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Light">Light</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Dark">Dark</bs-button>

Outline

In need of a button, but not the hefty background colors they bring? Set outline="true" to remove all background images and colors on any button.

aspnet


<bs-button stack="this.Html.GetStack()" btn-style="Primary" outline="true">Primary</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Secondary" outline="true">Secondary</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Success" outline="true">Success</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Danger" outline="true">Danger</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Warning" outline="true">Warning</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Info" outline="true">Info</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Light" outline="true">Light</bs-button>
<bs-button stack="this.Html.GetStack()" btn-style="Dark" outline="true">Dark</bs-button>

Some of the button styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Sizes

Fancy larger or smaller buttons? Add set btn-size to Large or Small for additional sizes.

aspnet


<bs-button btn-style="Primary" btn-size="Large">Large button</bs-button>
<bs-button btn-style="Secondary" btn-size="Small">Large button</bs-button>

aspnet


<bs-button btn-style="Primary" btn-size="Small">Small button</bs-button>
<bs-button btn-style="Secondary" btn-size="Small">Small button</bs-button>

Disabled

Make buttons look inactive by setting disabled="true" to any <bs-button> element. Disabled buttons have pointer-events: none applied to, preventing hover and active states from triggering.

aspnet


<bs-button btn-style="Primary" disabled="true">Primary button</bs-button>
<bs-button btn-style="Secondary" disabled="true">Secondary button</bs-button>
<bs-button btn-style="Primary" outline="true" disabled="true">Primary button</bs-button>
<bs-button btn-style="Secondary" outline="true" disabled="true">Secondary button</bs-button>