--- 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 %} Button {% endcapture %} {% capture button_tags_example %} Anchor {% endcapture %} {% capture button_colors_a_example %} White Light Dark Black Text {% endcapture %} {% capture button_colors_b_example %} Primary Link Info Success Warning Danger {% endcapture %} {% capture button_sizes_example %} Small Normal Medium Large {% endcapture %} {% capture button_outlined_example %} Outlined Outlined Outlined Outlined Outlined Outlined {% endcapture %} {% capture button_inverted_example %} Inverted Inverted Inverted Inverted Inverted {% endcapture %} {% capture button_inverted_outlined_example %} Invert Outlined Invert Outlined Invert Outlined Invert Outlined Invert Outlined {% endcapture %} {% capture button_rounded_example %} Rounded Rounded Rounded Rounded Rounded Rounded {% endcapture %} {% capture button_normal_example %} Normal Normal Normal Normal Normal Normal Normal {% endcapture %} {% capture button_hover_example %} Hover Hover Hover Hover Hover Hover Hover {% endcapture %} {% capture button_focus_example %} Focus Focus Focus Focus Focus Focus Focus {% endcapture %} {% capture button_active_example %} Active Active Active Active Active Active Active {% endcapture %} {% capture button_loading_example %} Loading Loading Loading Loading Loading Loading Loading {% endcapture %} {% capture button_static_example %} Static {% endcapture %} {% capture button_disabled_example %} Disabled Disabled Disabled Disabled Disabled Disabled Disabled {% endcapture %} {% capture button_fa_example %}

{% endcapture %} {% capture button_only_icon_example %}

{% endcapture %} {% capture button_group_example %}

Save changes

Cancel

Delete post

{% endcapture %} {% capture button_addons_example %}

Left

Center

Right

{% endcapture %} {% capture button_group_addons_example %}

{% endcapture %} {% capture buttons_list %}

Save changes Save and continue Cancel

{% endcapture %} {% capture buttons_multiple %}

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty

{% endcapture %} {% capture buttons_addons %}

Yes Maybe No

{% endcapture %} {% capture buttons_addons_centered %}

Yes Maybe No

{% endcapture %} {% capture buttons_addons_right %}

Yes Maybe No

{% endcapture %} {% capture buttons_addons_selected %}

Yes Maybe No

{% 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 elements/snippet.html wrapper="buttons" content=button_example %}

The .button class can be used on:

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

{% 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" %} {% include elements/snippet.html wrapper="buttons" content=button_sizes_example %} {% include elements/anchor.html name="Styles" %}

Outlined

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

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

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

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

{% highlight html %}{{ button_inverted_outlined_example }}{% endhighlight %}

Rounded buttons

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

{% highlight html %}{{ button_rounded_example }}{% endhighlight %}

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

Normal

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

Hover

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

Focus

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

Active

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

Loading

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

{% 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.

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

Disabled

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

{% include 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.

{% highlight html %}{{ button_only_icon_example }}{% endhighlight %}

{% include 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 elements/snippet.html content=button_group_example %} {% include elements/anchor.html name="Button addons" %}

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

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

You can group together addons as well:

{% 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" %}

You can now create a list of buttons with the .buttons container.

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

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

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

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

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

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

    {% 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.

{% 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.

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