--- title: Button layout: docs theme: library doc-tab: elements doc-subtab: button breadcrumb: - home - documentation - elements - elements-button meta: colors: true sizes: true variables: true --- {% capture button_example %} {% endcapture %} {% capture button_tags_example %} Anchor {% endcapture %} {% capture button_colors_a_example %} {% endcapture %} {% capture button_colors_b_example %}
{% endcapture %} {% capture button_light_colors_b_example %}
{% endcapture %} {% capture button_dark_colors_b_example %}
{% endcapture %} {% capture button_sizes_example %} {% endcapture %} {% capture buttons_medium_sizes_example %}
{% endcapture %} {% capture buttons_small_normal_sizes_example %}
{% endcapture %} {% capture button_displays_example %} {% endcapture %} {% capture button_outlined_example %} {% endcapture %} {% capture button_inverted_example %} {% endcapture %} {% capture button_rounded_example %} {% endcapture %} {% capture button_normal_example %} {% endcapture %} {% capture button_hover_example %} {% endcapture %} {% capture button_focus_example %} {% endcapture %} {% capture button_active_example %} {% endcapture %} {% capture button_loading_example %} {% endcapture %} {% capture button_static_example %} Static {% endcapture %} {% capture button_disabled_example %} {% endcapture %} {% capture button_fa_example %}

{% endcapture %} {% capture button_only_icon_example %}

{% endcapture %} {% capture button_group_example %}

{% endcapture %} {% capture button_addons_example %}

{% endcapture %} {% capture button_group_addons_example %}

{% endcapture %} {% capture buttons_list %}
{% endcapture %} {% capture buttons_multiple %}
{% endcapture %} {% capture buttons_addons %}
{% endcapture %} {% capture buttons_addons_centered %}
{% endcapture %} {% capture buttons_addons_right %}
{% endcapture %} {% capture buttons_addons_selected %}
{% endcapture %}

The button is an essential element of any design. It's meant to look and behave as an interactive element of your page.

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

The button class can be used on:

{% include docs/elements/snippet.html wrapper="buttons" content=button_tags_example %} {% include docs/elements/anchor.html name="Colors" %}

The button is available in all the different colors defined by the $colors Sass map.

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

Each color also comes in its light version. Simply append the modifier is-light to the color modifier to apply the light version of the button.

{% include docs/elements/snippet.html content=button_light_colors_b_example %}

A dark version also exists. Simply append the modifier is-dark.

{% include docs/elements/snippet.html content=button_dark_colors_b_example %} {% include docs/elements/anchor.html name="Sizes" %}

The button comes in 4 different sizes:

While the default size is the normal one, the is-normal modifier exists in case you need to reset the button to its normal size.

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

You can change the size of multiple buttons at once by wrapping them in a buttons parent, and applying one of 3 modifiers:

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

You can change the size of only a subset of buttons by simply applying a modifier class to them.
For example, if you want all buttons to be small but still have one in its normal size, simply do the following:

{% include docs/elements/snippet.html content=buttons_small_normal_sizes_example %} {% include docs/elements/anchor.html name="Responsive sizes" %}

If you want different button sizes for each breakpoint, you can use Bulma's responsive buttons. Simply append the is-responsive modifier:

{% include docs/snippets/responsive-buttons.html %}

You can customise the sizes by overwriting the $button-responsive-sizes Sass variable.

{% include docs/elements/anchor.html name="Displays" %} {% include docs/elements/snippet.html wrapper="buttons" content=button_displays_example %} {% include docs/elements/anchor.html name="Styles" %}

Outlined

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

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

{{ button_inverted_example }}
{% highlight html -%} {{- button_inverted_example -}} {%- endhighlight %}

Rounded buttons

{{ button_rounded_example }}
{% highlight html -%} {{- button_rounded_example -}} {%- endhighlight %}
{% include docs/elements/anchor.html name="States" %}

Bulma styles the different states of its buttons. Each state is available as a pseudo-class and a CSS class:

This allows you to obtain the style of a certain state without having to trigger it.

Normal

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

Hover

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

Focus

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

Active

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

Loading

You can very easily turn a button into its loading version by appending the is-loading modifier. You don't even need to remove the inner text, which allows the button to maintain its original size between its default and loading states.

{{ button_loading_example }}

Since the loading spinner is implemented using the ::after pseudo-element, it is not supported by the <input type="submit"> element. Consider using <button type="submit"> instead.

{% highlight html -%} {{- button_loading_example -}} {%- endhighlight %}

Static

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.

{{ button_static_example }}
{% highlight html -%} {{- button_static_example -}} {%- endhighlight %}

Disabled

Bulma supports the use of the disabled Boolean HTML attribute, which prevents the user from interacting with the button.

{{ button_disabled_example }}

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

{% highlight html -%} {{- button_disabled_example -}} {%- endhighlight %}

With Font Awesome icons

Bulma buttons can easily be enhanced by adding a Font Awesome icon. For the best results, wrap the inner text in a separate <span> element.

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

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.

{{ button_only_icon_example }}
{% highlight html -%} {{- button_only_icon_example -}} {%- endhighlight %}
{% include docs/elements/anchor.html name="Button group" %}

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

{% include docs/elements/snippet.html content=button_group_example %} {% include docs/elements/anchor.html name="Button addons" %}

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

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

You can group together addons as well:

{% include docs/elements/snippet.html content=button_group_addons_example %} {% include docs/elements/anchor.html name="List of buttons" %}

You can create a list of buttons by using the buttons container.

{{ buttons_list }}
{% highlight html -%} {{- buttons_list -}} {%- endhighlight %}

If the list is very long, it will automatically wrap on multiple lines, while keeping all buttons evenly spaced.

{{ buttons_multiple }}
{% highlight html -%} {{- buttons_multiple -}} {%- endhighlight %}

You can attach buttons together with the has-addons modifier.

{{ buttons_addons }}
{% highlight html -%} {{- buttons_addons -}} {%- endhighlight %}

Use the is-centered or the is-right modifiers to alter the alignment.

{{ buttons_addons_centered }} {{ buttons_addons_right }}
{% highlight html -%} {{- buttons_addons_centered -}} {{- buttons_addons_right -}} {%- endhighlight %}

You can use any modifier class on each button to differentiate them. Make sure to add the is-selected modifier as well to make sure the selected button is above its siblings.

{{ buttons_addons_selected }}
{% highlight html -%} {{- buttons_addons_selected -}} {%- endhighlight %}

Difference between form groups and list of buttons

While this list of buttons style can be achieved with either field is-grouped or the new buttons class, there are a few differences:

  • buttons has a simpler markup
  • buttons can only contain button elements
  • field is-grouped can contain any type of control inputs
  • field is-grouped can be forced to fit all controls on a single line
  • with field is-grouped you can expand one of the controls

Basically, if you only want a list of buttons, using buttons is recommended. If you need more control on the styling and the elements, use a form group.