--- layout: documentation doc-tab: elements doc-subtab: button --- {% include subnav-elements.html %}

Buttons

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

{% capture button_example %}

Button White Light Dark Black Link

Primary Info Success Warning Danger

{% endcapture %}

{% highlight html %} {{button_example}} {% endhighlight %}

Sizes

{% capture button_sizes_example %} Small Normal Medium Large {% endcapture %}

{% highlight html %} {{button_sizes_example}} {% endhighlight %}

Styles

Outlined

{% capture button_outlined_example %} Outlined Outlined Outlined Outlined Outlined {% endcapture %}

{% highlight html %} {{button_outlined_example}} {% endhighlight %}

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

{% capture button_inverted_example %} Inverted Inverted Inverted Inverted {% endcapture %}

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

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

{% capture button_inverted_outlined_example %} Invert Outlined Invert Outlined Invert Outlined Invert Outlined {% endcapture %}

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

States

Normal

{% capture button_normal_example %} Normal Normal Normal Normal Normal Normal {% endcapture %}

{% highlight html %} {{button_normal_example}} {% endhighlight %}

Hover

{% capture button_hover_example %} Hover Hover Hover Hover Hover Hover {% endcapture %}

{% highlight html %} {{button_hover_example}} {% endhighlight %}

Focus

{% capture button_focus_example %} Focus Focus Focus Focus Focus Focus {% endcapture %}

{% highlight html %} {{button_focus_example}} {% endhighlight %}

Active

{% capture button_active_example %} Active Active Active Active Active Active {% endcapture %}

{% highlight html %} {{button_active_example}} {% endhighlight %}

Loading

{% capture button_loading_example %} Loading Loading Loading Loading Loading Loading {% endcapture %}

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

Static

{% capture button_static_example %} Static {% endcapture %}

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.

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

Disabled

{% capture button_disabled_example %} Disabled Disabled Disabled Disabled Disabled Disabled {% endcapture %}

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

{% capture button_fa_example %}

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub

{% endcapture %}

{% highlight html %} {{button_fa_example}} {% endhighlight %}

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.

{% capture button_only_icon_example %}

{% endcapture %} {{button_only_icon_example}}

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

Button group

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

{% capture button_group_example %}

Save changes

Cancel

Delete post

{% endcapture %}

{% highlight html %} {{button_group_example}} {% endhighlight %}

Button addons

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

{% capture button_addons_example %}

Left

Center

Right

{% endcapture %}

{% highlight html %} {{button_addons_example}} {% endhighlight %}

Button group with addons

You can group together addons as well:

{% capture button_group_addons_example %}

{% endcapture %}

{% highlight html %} {{button_group_addons_example}} {% endhighlight %}