You are viewing the deprecated 0.5.1 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

Buttons

The classic button, in different colors, sizes, and states

Colors Yes
Sizes Yes
Variables Yes
Button 
<a class="button">Button</a>

Colors #

White Light Dark Black Link 
<a class="button is-white">White</a>
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-black">Black</a>
<a class="button is-link">Link</a>
Primary Info Success Warning Danger 
<a class="button is-primary">Primary</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
<a class="button is-danger">Danger</a>

Sizes #

Small Normal Medium Large 
<a class="button is-small">Small</a>
<a class="button">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>

Styles

Outlined

Outlined Outlined Outlined Outlined Outlined 
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>

Inverted (the text color becomes the background color, and vice-versa)

Inverted Inverted Inverted Inverted 
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-info is-inverted">Inverted</a>
<a class="button is-success is-inverted">Inverted</a>
<a class="button is-danger is-inverted">Inverted</a>

Invert Outlined (the invert color becomes the text and border colors)

Invert Outlined Invert Outlined Invert Outlined Invert Outlined 
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>

States

Normal

Normal Normal Normal Normal Normal Normal 
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
<a class="button is-danger">Normal</a>

Hover

Hover Hover Hover Hover Hover Hover 
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
<a class="button is-danger is-hovered">Hover</a>

Focus

Focus Focus Focus Focus Focus Focus 
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
<a class="button is-danger is-focused">Focus</a>

Active

Active Active Active Active Active Active 
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
<a class="button is-danger is-active">Active</a>

Loading

Loading Loading Loading Loading Loading Loading 
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
<a class="button is-danger is-loading">Loading</a>

Static

New! 0.4.2

You can create a non-interactive button by using the is-static modifier. This is useful to align a text label with an input, for example when using form addons.

Static 
<span class="button is-static">Static</span>

Disabled

Disabled Disabled Disabled Disabled Disabled Disabled

The is-disabled CSS class has been deprecated in favor of the disabled HTML attribute. Learn more

<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>

With Font Awesome icons

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub 

<p class="field">
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-bold"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-italic"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-underline"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button">
    <span class="icon">
      <i class="fa fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-primary">
    <span class="icon">
      <i class="fa fa-twitter"></i>
    </span>
    <span>Twitter</span>
  </a>
  <a class="button is-success">
    <span class="icon is-small">
      <i class="fa fa-check"></i>
    </span>
    <span>Save</span>
  </a>
  <a class="button is-danger is-outlined">
    <span>Delete</span>
    <span class="icon is-small">
      <i class="fa fa-times"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fa fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button">
    <span class="icon">
      <i class="fa fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-medium">
    <span class="icon">
      <i class="fa fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fa fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
</p>

New!

If the button only contains an icon, Bulma will make sure the button remains square, no matter the size of the button or of the icon. 

<p class="field">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fa fa-header"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-header"></i>
    </span>
  </a>
  <a class="button">
  <span class="icon">
    <i class="fa fa-header"></i>
  </span>
  </a>
</p>
<p class="field">
  <a class="button is-medium">
    <span class="icon is-small">
      <i class="fa fa-header"></i>
    </span>
  </a>
  <a class="button is-medium">
  <span class="icon">
    <i class="fa fa-header"></i>
  </span>
  </a>
  <a class="button is-medium">
    <span class="icon is-medium">
      <i class="fa fa-header"></i>
    </span>
  </a>
</p>
<p class="field">
  <a class="button is-large">
    <span class="icon is-small">
      <i class="fa fa-header"></i>
    </span>
  </a>
  <a class="button is-large">
  <span class="icon">
    <i class="fa fa-header"></i>
  </span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fa fa-header"></i>
    </span>
  </a>
  <a class="button is-large">
    <span class="icon is-large">
      <i class="fa fa-header"></i>
    </span>
  </a>
</p>

Button group

If you want to group buttons together, use the is-grouped modifier on the field container:

Save changes

Cancel

Delete post 

<div class="field is-grouped">
  <p class="control">
    <a class="button is-primary">
      Save changes
    </a>
  </p>
  <p class="control">
    <a class="button">
      Cancel
    </a>
  </p>
  <p class="control">
    <a class="button is-danger">
      Delete post
    </a>
  </p>
</div>

Button addons

If you want to use buttons as addons, use the has-addons modifier on the field container:

Left

Center

Right 

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>

Button group with addons

You can group together addons as well:

Bold

Italic

Underline

Left

Center

Right 

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-bold"></i>
      </span>
      <span>Bold</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-italic"></i>
      </span>
      <span>Italic</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-underline"></i>
      </span>
      <span>Underline</span>
    </a>
  </p>
</div>

<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fa fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>

Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name Default value
Name Default value
$button-color $grey-darker
$button-background-color $white
$button-border-color $grey-lighter
$button-hover-color $link-hover
$button-hover-border-color $link-hover-border
$button-focus-color $link-focus
$button-focus-border-color $link-focus-border
$button-active-color $link-active
$button-active-border-color $link-active-border
$button-link-color $text
$button-link-hover-background-color $background
$button-link-hover-color $text-strong
$button-disabled-background-color $white
$button-disabled-border-color $grey-lighter
$button-disabled-shadow none
$button-disabled-opacity 0.5
$button-static-color $grey
$button-static-background-color $white-ter
$button-static-border-color $grey-lighter
$button-shadow-inset inset 0 1px 2px rgba($black, 0.2)

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!