bulma/docs/documentation/elements/button.html

---
title: Button
layout: documentation
doc-tab: elements
doc-subtab: button
breadcrumb:
- home
- documentation
- elements
- elements-button
meta:
  colors: true
  sizes: true
  variables: true
---

{% capture button_example %}
<a class="button">Button</a>
{% endcapture %}

{% capture button_tags_example %}
<a class="button">Anchor</a>
<button class="button">Button</button>
<input class="button" type="submit" value="Submit input">
<input class="button" type="reset" value="Reset input">
{% endcapture %}

{% capture button_colors_a_example %}
<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-text">Text</a>
{% endcapture %}

{% capture button_colors_b_example %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</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>
{% endcapture %}

{% capture button_sizes_example %}
<a class="button is-small">Small</a>
<a class="button">Default</a>
<a class="button is-normal">Normal</a>
<a class="button is-medium">Medium</a>
<a class="button is-large">Large</a>
{% endcapture %}

{% capture buttons_medium_sizes_example %}
<div class="buttons are-medium">
  <a class="button">All</a>
  <a class="button">Medium</a>
  <a class="button">Size</a>
</div>
{% endcapture %}

{% capture buttons_small_normal_sizes_example %}
<div class="buttons are-small">
  <a class="button">Small</a>
  <a class="button">Small</a>
  <a class="button">Small</a>
  <a class="button is-normal">Normal</a>
  <a class="button">Small</a>
</div>
{% endcapture %}

{% capture button_displays_example %}
<a class="button is-small is-fullwidth">Small</a>
<a class="button is-fullwidth">Normal</a>
<a class="button is-medium is-fullwidth">Medium</a>
<a class="button is-large is-fullwidth">Large</a>
{% endcapture %}

{% capture button_outlined_example %}
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_inverted_example %}
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_rounded_example %}
<a class="button is-rounded">Rounded</a>
<a class="button is-primary is-rounded">Rounded</a>
<a class="button is-link is-rounded">Rounded</a>
<a class="button is-info is-rounded">Rounded</a>
<a class="button is-success is-rounded">Rounded</a>
<a class="button is-danger is-rounded">Rounded</a>
{% endcapture %}

{% capture button_normal_example %}
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">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>
{% endcapture %}

{% capture button_hover_example %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_focus_example %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_active_example %}
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_loading_example %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link 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>
{% endcapture %}

{% capture button_static_example %}
<span class="button is-static">Static</span>
{% endcapture %}

{% capture button_disabled_example %}
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" 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>
{% endcapture %}

{% capture button_fa_example %}
<p class="buttons">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-bold"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-italic"></i>
    </span>
  </a>
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-underline"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-primary">
    <span class="icon">
      <i class="fab fa-twitter"></i>
    </span>
    <span>Twitter</span>
  </a>
  <a class="button is-success">
    <span class="icon is-small">
      <i class="fas 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="fas fa-times"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-medium">
    <span class="icon">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fab fa-github"></i>
    </span>
    <span>GitHub</span>
  </a>
</p>
{% endcapture %}

{% capture button_only_icon_example %}
<p class="buttons">
  <a class="button is-small">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-medium">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-medium">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-medium">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>
<p class="buttons">
  <a class="button is-large">
    <span class="icon is-small">
      <i class="fas fa-heading"></i>
    </span>
  </a>
  <a class="button is-large">
  <span class="icon">
    <i class="fas fa-heading fa-lg"></i>
  </span>
  </a>
  <a class="button is-large">
    <span class="icon is-medium">
      <i class="fas fa-heading fa-2x"></i>
    </span>
  </a>
</p>
{% endcapture %}

{% capture button_group_example %}
<div class="field is-grouped">
  <p class="control">
    <a class="button is-link">
      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>
{% endcapture %}

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

{% capture button_group_addons_example %}
<div class="field has-addons">
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-bold"></i>
      </span>
      <span>Bold</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-italic"></i>
      </span>
      <span>Italic</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas 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="fas fa-align-left"></i>
      </span>
      <span>Left</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-center"></i>
      </span>
      <span>Center</span>
    </a>
  </p>
  <p class="control">
    <a class="button">
      <span class="icon is-small">
        <i class="fas fa-align-right"></i>
      </span>
      <span>Right</span>
    </a>
  </p>
</div>
{% endcapture %}

{% capture buttons_list %}
<div class="buttons">
  <span class="button is-success">Save changes</span>
  <span class="button is-info">Save and continue</span>
  <span class="button is-danger">Cancel</span>
</div>
{% endcapture %}

{% capture buttons_multiple %}
<div class="buttons">
  <span class="button">One</span>
  <span class="button">Two</span>
  <span class="button">Three</span>
  <span class="button">Four</span>
  <span class="button">Five</span>
  <span class="button">Six</span>
  <span class="button">Seven</span>
  <span class="button">Eight</span>
  <span class="button">Nine</span>
  <span class="button">Ten</span>
  <span class="button">Eleven</span>
  <span class="button">Twelve</span>
  <span class="button">Thirteen</span>
  <span class="button">Fourteen</span>
  <span class="button">Fifteen</span>
  <span class="button">Sixteen</span>
  <span class="button">Seventeen</span>
  <span class="button">Eighteen</span>
  <span class="button">Nineteen</span>
  <span class="button">Twenty</span>
</div>
{% endcapture %}

{% capture buttons_addons %}
<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>
{% endcapture %}

{% capture buttons_addons_centered %}
<div class="buttons has-addons is-centered">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>
{% endcapture %}

{% capture buttons_addons_right %}
<div class="buttons has-addons is-right">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>
{% endcapture %}

{% capture buttons_addons_selected %}
<div class="buttons has-addons">
  <span class="button is-success is-selected">Yes</span>
  <span class="button">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button is-info is-selected">Maybe</span>
  <span class="button">No</span>
</div>

<div class="buttons has-addons">
  <span class="button">Yes</span>
  <span class="button">Maybe</span>
  <span class="button is-danger is-selected">No</span>
</div>
{% endcapture %}

<div class="content">
  <p>
    The <strong>button</strong> is an essential element of any design. It's meant to look and behave as an <strong>interactive</strong> element of your page.
  </p>
</div>

{% include elements/snippet.html wrapper="buttons" content=button_example %}

<div class="content">
  <p>
    The <code>.button</code> class can be used on:
  </p>
  <ul>
    <li>
      <code>&lt;a&gt;</code> anchor links
    </li>
    <li>
      <code>&lt;button&gt;</code> form buttons
    </li>
    <li>
      <code>&lt;input type="submit"&gt;</code> submit inputs
    </li>
    <li>
      <code>&lt;input type="reset"&gt;</code> reset inputs
    </li>
  </ul>
</div>

{% include elements/snippet.html wrapper="buttons" content=button_tags_example %}

{% include elements/anchor.html name="Colors" %}

{% include elements/snippet.html wrapper="buttons" content=button_colors_a_example %}

{% include elements/snippet.html wrapper="buttons" content=button_colors_b_example %}

{% include elements/anchor.html name="Sizes" %}

<div class="content">
  <p>
    The button comes in <strong>4 different sizes:</strong>
  </p>
  <ul>
    <li>
      small
    </li>
    <li>
      normal
    </li>
    <li>
      medium
    </li>
    <li>
      large
    </li>
  </ul>
  <p>
    While the default size is the <strong>normal</strong> one, the <code>is-normal</code> modifier exists in case you need to reset the button to its normal size.
  </p>
</div>

{% include elements/snippet.html wrapper="buttons" content=button_sizes_example %}

{% include elements/new-tag.html version="0.7.3" %}

<div class="content">
  <p>
    You can change the size of <strong>multiple buttons</strong> at once by wrapping them in a <code>.buttons</code> parent, and applying one of 3 modifiers:
  </p>
  <ul>
    <li>
      <code>buttons are-small</code>
    </li>
    <li>
      <code>buttons are-medium</code>
    </li>
    <li>
      <code>buttons are-large</code>
    </li>
  </ul>
</div>

{% include elements/snippet.html content=buttons_medium_sizes_example %}

<div class="content">
  <p>
    You can change the size of only a <strong>subset of buttons</strong> by simply applying a modifier class to them.
    <br>
    For example, if you want all buttons to be <strong>small</strong> but still have one in its <strong>normal</strong> size, simply do the following:
  </p>
</div>

{% include elements/snippet.html content=buttons_small_normal_sizes_example %}

{% include elements/anchor.html name="Displays" %}

{% include elements/snippet.html wrapper="buttons" content=button_displays_example %}

{% include elements/anchor.html name="Styles" %}

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

{% include elements/snippet.html wrapper="buttons" content=button_outlined_example %}

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

<div class="columns">
  <div class="column">
    <div class="bd-callout is-primary">
      <div class="buttons">
        {{ button_inverted_example }}
      </div>
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{button_inverted_example}}{% endhighlight %}
  </div>
</div>

<h4 class="subtitle">Invert Outlined (the invert color becomes the text and border colors)</h4>

<div class="columns">
  <div class="column">
    <div class="bd-callout is-primary">
      <div class="buttons">
        {{ button_inverted_outlined_example }}
      </div>
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}
  </div>
</div>

<h4 class="subtitle">Rounded buttons</h4>

<div class="columns">
  <div class="column">
    {% include elements/new-tag.html version="0.6.2" %}
    <div class="buttons">
      {{ button_rounded_example }}
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{ button_rounded_example }}{% endhighlight %}
  </div>
</div>

{% include elements/anchor.html name="States" %}

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

{% include elements/snippet.html wrapper="buttons" content=button_normal_example %}

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

{% include elements/snippet.html wrapper="buttons" content=button_hover_example %}

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

{% include elements/snippet.html wrapper="buttons" content=button_focus_example %}

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

{% include elements/snippet.html wrapper="buttons" content=button_active_example %}

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

<div class="columns">
  <div class="column">
    <div class="buttons">
      {{ button_loading_example }}
    </div>
    <div class="message is-info">
      <div class="message-body">
        <p>
          Since the loading spinner is implemented using the <code>:after</code> pseudo-element, it is not supported by the <code>&lt;input type="submit"&gt;</code> element. Consider using <code>&lt;button type="submit"&gt;</code> instead.
        </p>
      </div>
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{button_loading_example}}{% endhighlight %}
  </div>
</div>

<h4 id="static-button" class="subtitle">
  Static
</h4>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        You can create a <strong>non-interactive button</strong> by using the <code>is-static</code> modifier. This is useful to align a text label with an input, for example when using <a href="{{site.url}}/documentation/form/general#form-addons">form addons</a>.
      </p>
    </div>
    {{ button_static_example }}
  </div>
  <div class="column">
    {% highlight html %}{{ button_static_example }}{% endhighlight %}
  </div>
</div>

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

<div class="columns">
  <div class="column">
    <div class="buttons">
      {{ button_disabled_example }}
    </div>
    <div class="message is-danger">
      <div class="message-body">
        <p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
      </div>
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{button_disabled_example}}{% endhighlight %}
  </div>
</div>

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

{% include elements/snippet.html content=button_fa_example clipped=true %}

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

{% include elements/anchor.html name="Button group" %}

<div class="content">
  <p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>

{% include elements/snippet.html content=button_group_example %}

{% include elements/anchor.html name="Button addons" %}

<div class="content">
  <p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>

{% include elements/snippet.html content=button_addons_example %}

{% include elements/anchor.html name="Button group with addons" %}

<div class="content">
  <p>You can group together addons as well:</p>
</div>

{% include elements/snippet.html content=button_group_addons_example %}

{% include elements/anchor.html name="List of buttons" %}

{% include elements/new-tag.html version="0.6.1" %}

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        You can now create a <strong>list of buttons</strong> with the <code>.buttons</code> container.
      </p>
    </div>
    <div class="bd-example">
      {{ buttons_list }}
    </div>
  </div>
  <div class="column">
    {% highlight html %}{{ buttons_list }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        If the list is <strong>very long</strong>, it will automatically wrap on <strong>multiple lines</strong>, while keeping all buttons <strong>evenly spaced</strong>.
      </p>
    </div>
    <div class="bd-example">
      {{ buttons_multiple }}
    </div>
  </div>
  <div class="column highlight-full">
    {% highlight html %}{{ buttons_multiple }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        You can <strong>attach buttons together</strong> with the <code>.has-addons</code> modifier.
      </p>
    </div>
    <div class="bd-example">
      {{ buttons_addons }}
    </div>
  </div>
  <div class="column highlight-full">
    {% highlight html %}{{ buttons_addons }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        Use the <code>is-centered</code> or the <code>is-right</code> modifiers to alter the <strong>alignment</strong>.
      </p>
    </div>
    <div class="bd-example">
      {{ buttons_addons_centered }}
      {{ buttons_addons_right }}
    </div>
  </div>
  <div class="column highlight-full">
    {% highlight html %}{{ buttons_addons_centered }}{{ buttons_addons_right }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>
        You can use any <strong>modifier</strong> class on each button to differentiate them. Make sure to add the <code>is-selected</code> modifier as well to make sure the selected button is <em>above</em> its siblings.
      </p>
    </div>
    <div class="bd-example">
      {{ buttons_addons_selected }}
    </div>
  </div>
  <div class="column highlight-full">
    {% highlight html %}{{ buttons_addons_selected }}{% endhighlight %}
  </div>
</div>

<div class="message is-info">
  <div class="message-header">
    <p>Difference between <a href="{{ site.url }}/documentation/form/general/#form-group">form groups</a> and <strong>list of buttons</strong></p>
  </div>
  <div class="message-body">
    <div class="content">
      <p>
        While this list of buttons style can be achieved with either <code>field is-grouped</code> or the new <code>buttons</code> class, there are a few differences:
      </p>
      <ul>
        <li>
          <code>buttons</code> has a <strong>simpler markup</strong>
        </li>
        <li>
          <code>buttons</code> can only contain <code>button</code> elements
        </li>
        <li>
          <code>field is-grouped</code> can contain <em>any</em> type of <code>control</code> inputs
        </li>
        <li>
          <code>field is-grouped</code> can be forced to fit all controls on a <strong>single line</strong>
        </li>
        <li>
          with <code>field is-grouped</code> you can <strong>expand</strong> one of the controls
        </li>
      </ul>
      <p>
        Basically, if you only want a list of <em>buttons</em>, using <code>buttons</code> is recommended. If you need more control on the styling and the elements, use a <a href="{{ site.url }}/documentation/form/general/#form-group">form group</a>.
      </p>
    </div>
  </div>
</div>

{% include elements/variables.html type='element' %}