bulma/docs/documentation/elements/button.html

---
layout: documentation
doc-tab: elements
doc-subtab: button
---

{% include subnav-elements.html %}

<section class="section">
  <div class="container">
    <h1 class="title">Buttons</h1>
    <h2 class="subtitle">
      The classic <strong>button</strong>, in different colors, sizes, and states
    </h2>

    <hr>

    <div class="columns">
      <div class="column">
        <div class="block">
          <a class="button">Button</a>
          <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>
        </div>
        <div class="block">
          <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>
        </div>
      </div>
      <div class="column">
{% highlight html %}
<a class="button">Button</a>
<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>
<a class="button is-link">Link</a>
{% endhighlight %}
      </div>
    </div>

    <hr>

    <h3 class="title">Sizes</h3>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <hr>

    <h3 class="title">Styles</h3>
    <h4 class="subtitle">Outlined</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>

    <div class="columns">
      <div class="column">
        <div class="notification is-primary">
          <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>
        </div>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <hr>

    <h3 class="title">States</h3>
    <h4 class="subtitle">Normal</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>
    <h4 class="subtitle">Hover</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">Focus</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">Active</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">Loading</h4>

    <div class="columns">
      <div class="column">
        <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>
      </div>
      <div class="column">
{% highlight html %}
<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>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">Disabled</h4>

    <div class="columns">
      <div class="column">
        <a class="button is-disabled">Disabled</a>
        <a class="button is-primary is-disabled">Disabled</a>
        <a class="button is-info is-disabled">Disabled</a>
        <a class="button is-success is-disabled">Disabled</a>
        <a class="button is-warning is-disabled">Disabled</a>
        <a class="button is-danger is-disabled">Disabled</a>
      </div>
      <div class="column">
{% highlight html %}
<a class="button is-disabled">Disabled</a>
<a class="button is-primary is-disabled">Disabled</a>
<a class="button is-info is-disabled">Disabled</a>
<a class="button is-success is-disabled">Disabled</a>
<a class="button is-warning is-disabled">Disabled</a>
<a class="button is-danger is-disabled">Disabled</a>
{% endhighlight %}
      </div>
    </div>

    <h4 class="subtitle">With Font Awesome icons</h4>

    <div class="columns">
      <div class="column">
        <p class="control">
          <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="control">
          <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="control">
          <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>
      </div>
      <div class="column">
{% highlight html %}
<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">
    <i class="fa fa-check"></i>
  </span>
  <span>Save</span>
</a>
<a class="button is-danger">
  <span>Delete</span>
  <span class="icon">
    <i class="fa fa-times"></i>
  </span>
</a>
<a class="button is-danger is-outlined">
  <span class="icon">
    <i class="fa fa-times"></i>
  </span>
  <span>Delete</span>
</a>
{% endhighlight %}
      </div>
    </div>

    <div class="columns">
      <div class="column">
        <div class="content">
          <p>
            <span class="tag is-success">New!</span>
          </p>
          <p>
            If the button only contains an icon, Bulma will make sure the button remains <strong>square</strong>, no matter the size of the button <em>or</em> of the icon.
          </p>
        </div>

        <p class="control">
          <a class="button is-small">
            <span class="icon is-small">
              <i class="fa fa-header"></i>
            </span>
          </a>
        </p>
        <p class="control">
          <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="control">
          <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="control">
          <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>
      </div>
      <div class="column">
{% highlight html %}
<p class="control">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fa fa-header"></i>
    </span>
  </a>
</p>
<p class="control">
  <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="control">
  <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="control">
  <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>
{% endhighlight %}
      </div>
    </div>

    <hr>

    <h3 class="title">Button group</h3>
    <div class="content">
      <p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>control</code> container:</p>
    </div>
    <div class="example">
      <div class="control 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>
    </div>
{% highlight html %}
<div class="control 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>
{% endhighlight %}

    <hr>

    <h3 class="title">Button addons</h3>
    <div class="content">
      <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>control</code> container:</p>
    </div>
    <div class="example">
      <p class="control has-addons">
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-left"></i>
          </span>
          <span>Left</span>
        </a>
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-center"></i>
          </span>
          <span>Center</span>
        </a>
        <a class="button">
          <span class="icon is-small">
            <i class="fa fa-align-right"></i>
          </span>
          <span>Right</span>
        </a>
      </p>
    </div>
{% highlight html %}
<p class="control has-addons">
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-left"></i>
    </span>
    <span>Left</span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-center"></i>
    </span>
    <span>Center</span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-right"></i>
    </span>
    <span>Right</span>
  </a>
</p>
{% endhighlight %}

    <hr>

    <h3 class="title">Button group with addons</h3>
    <div class="content">
      <p>You can group together addons as well:</p>
    </div>
    <div class="example">
      <div class="control is-grouped">
        <p class="control has-addons">
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-bold"></i>
            </span>
            <span>Bold</span>
          </a>
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-italic"></i>
            </span>
            <span>Italic</span>
          </a>
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-underline"></i>
            </span>
            <span>Underline</span>
          </a>
        </p>
        <p class="control has-addons">
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-align-left"></i>
            </span>
            <span>Left</span>
          </a>
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-align-center"></i>
            </span>
            <span>Center</span>
          </a>
          <a class="button">
            <span class="icon is-small">
              <i class="fa fa-align-right"></i>
            </span>
            <span>Right</span>
          </a>
        </p>
      </div>
    </div>
{% highlight html %}
<p class="control has-addons">
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-left"></i>
    </span>
    <span>Left</span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-center"></i>
    </span>
    <span>Center</span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fa fa-align-right"></i>
    </span>
    <span>Right</span>
  </a>
</p>
{% endhighlight %}

  </div>
</section>