Button

<button class="button">Button</button>

The .button class can be used on:

  • <a> anchor links
  • button form buttons
  • <input type="submit"> submit inputs
  • <input type="reset"> reset inputs

Button 

<a href="#" class="button">Button</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">

Colors





<button class="button">Default (primary)</button>
<button class="button is-accent">Accent</button>
<button class="button is-accent-alt">Accent alt</button>
<button class="button is-success">Success</button>
<button class="button is-light-success">Light Success</button>
<button class="button is-warning">Warning</button>
<button class="button is-light-warning">Light Warning</button>
<button class="button is-danger">Danger</button>
<button class="button is-light-danger">Light Danger</button>
<button class="button is-info">Info</button>

Inverted





<button class="button is-inverted is-inverted">Default (primary)</button>
<button class="button is-inverted is-accent">Accent</button>
<button class="button is-inverted is-accent-alt">Accent alt</button>
<button class="button is-inverted is-success">Success</button>
<button class="button is-inverted is-light-success">Light Success</button>
<button class="button is-inverted is-warning">Warning</button>
<button class="button is-inverted is-light-warning">Light Warning</button>
<button class="button is-inverted is-danger">Danger</button>
<button class="button is-inverted is-light-danger">Light Danger</button>
<button class="button is-inverted is-info">Info</button>

Sizes

Buttons are also available in a small size:

<button class="button">Normal button</button>
<button class="button is-small">Small button</button>

Styles

Outlined





<button class="button is-outlined">Outlined</button>
<button class="button is-outlined is-accent">Outlined</button>
<button class="button is-outlined is-accent-alt">Outlined</button>
<button class="button is-outlined is-success">Outlined</button>
<button class="button is-outlined is-light-success">Outlined</button>
<button class="button is-outlined is-warning">Outlined</button>
<button class="button is-outlined is-light-warning">Outlined</button>
<button class="button is-outlined is-danger">Outlined</button>
<button class="button is-outlined is-light-danger">Outlined</button>
<button class="button is-outlined is-info">Outlined</button>

States

Normal




<button class="button">Normal</button>
<button class="button is-accent">Normal</button>
<button class="button is-accent-alt">Normal</button>
<button class="button is-success">Normal</button>
<button class="button is-light-success">Normal</button>
<button class="button is-warning">Normal</button>
<button class="button is-light-warning">Normal</button>
<button class="button is-danger">Normal</button>
<button class="button is-light-danger">Normal</button>

Hovered




<button class="button is-hovered">Hovered</button>
<button class="button is-hovered is-accent">Hovered</button>
<button class="button is-hovered is-accent-alt">Hovered</button>
<button class="button is-hovered is-success">Hovered</button>
<button class="button is-hovered is-light-success">Hovered</button>
<button class="button is-hovered is-warning">Hovered</button>
<button class="button is-hovered is-light-warning">Hovered</button>
<button class="button is-hovered is-danger">Hovered</button>
<button class="button is-hovered is-light-danger">Hovered</button>

Disabled

<button class="button" disabled>Disabled</button>
<button class="button is-accent" disabled>Disabled</button>

Icons

<button class="button">
    <span class="icon"><i class="fab fa-github"></i></span>
    <span>GitHub</span>
</button>
<button class="button is-success">
    <span class="icon"><i class="fas fa-check"></i></span>
    <span>Save</span>
</button>
<button class="button is-outlined is-danger">
    <span>Delete</span>
    <span class="icon"><i class="fas fa-times"></i></span>
</button>

Variables

Name Type Value Computed value
$button-font-weight font-weight 700
$button-default-color color primary
rgb(0, 0, 0)
$button-padding-vertical size calc(0.75em - #{$control-border-width}) calc(0.75em - 1px)
$button-padding-horizontal size calc(0.70em - #{$control-border-width}) calc(0.70em - 1px)
$button-default-disabled-bg-color color $grey
rgb(176, 176, 176)
$button-default-disabled-color color $dark-grey
rgb(118, 118, 118)
$button-disabled-bg-color color $grey-lighter
rgb(242, 242, 242)
$button-disabled-color color $grey-light
rgb(185, 185, 185)
$button-small-font-size size .85em
$button-small-padding-vertical size calc(0.65em - #{$control-border-width}) calc(0.65em - 1px)
$button-small-padding-horizontal size calc(0.8em - #{$control-border-width}) calc(0.8em - 1px)
$button-icon-gap size 0.7em
← Table →