--- title: Button layout: documentation doc-tab: elements doc-subtab: button variables: - name: $button-color value: $grey-darker - name: $button-background-color value: $white - name: $button-border-color value: $grey-lighter - name: $button-hover-color value: $link-hover - name: $button-hover-border-color value: $link-hover-border - name: $button-focus-color value: $link-focus - name: $button-focus-border-color value: $link-focus-border - name: $button-active-color value: $link-active - name: $button-active-border-color value: $link-active-border - name: $button-link-color value: $text - name: $button-link-hover-background-color value: $background - name: $button-link-hover-color value: $text-strong - name: $button-disabled-background-color value: $white - name: $button-disabled-border-color value: $grey-lighter - name: $button-disabled-shadow value: none - name: $button-disabled-opacity value: 0.5 - name: $button-static-color value: $grey - name: $button-static-background-color value: $white-ter - name: $button-static-border-color value: $grey-lighter - name: $button-shadow-inset value: inset 0 1px 2px rgba($black, 0.2) --- {% capture button_example %} Button {% endcapture %} {% capture button_colors_a_example %} White Light Dark Black Link {% endcapture %} {% capture button_colors_b_example %} Primary Info Success Warning Danger {% endcapture %} {% capture button_sizes_example %} Small Normal Medium Large {% endcapture %} {% capture button_outlined_example %} Outlined Outlined Outlined Outlined Outlined {% endcapture %} {% capture button_inverted_example %} Inverted Inverted Inverted Inverted {% endcapture %} {% capture button_inverted_outlined_example %} Invert Outlined Invert Outlined Invert Outlined Invert Outlined {% endcapture %} {% capture button_normal_example %} Normal Normal Normal Normal Normal Normal {% endcapture %} {% capture button_hover_example %} Hover Hover Hover Hover Hover Hover {% endcapture %} {% capture button_focus_example %} Focus Focus Focus Focus Focus Focus {% endcapture %} {% capture button_active_example %} Active Active Active Active Active Active {% endcapture %} {% capture button_loading_example %} Loading Loading Loading Loading Loading Loading {% endcapture %} {% capture button_static_example %} Static {% endcapture %} {% capture button_disabled_example %} Disabled Disabled Disabled Disabled Disabled Disabled {% endcapture %} {% capture button_fa_example %}

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub

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

Bold

Italic

Underline

Left

Center

Right

{% endcapture %} {% include subnav-elements.html %}

Buttons

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

{% include meta.html colors=true sizes=true variables=true %}
{{button_example}}
{% highlight html %}{{button_example}}{% endhighlight %}
{% include heading.html name="Colors" %}
{{button_colors_a_example}}
{% highlight html %}{{button_colors_a_example}}{% endhighlight %}
{{button_colors_b_example}}
{% highlight html %}{{button_colors_b_example}}{% endhighlight %}
{% include heading.html name="Sizes" %}
{{button_sizes_example}}
{% highlight html %}{{button_sizes_example}}{% endhighlight %}

Styles

Outlined

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

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

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

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

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

States

Normal

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

Hover

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

Focus

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

Active

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

Loading

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

Static

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.

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

Disabled

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

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

{{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:

{{button_group_example}}
{% 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:

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

Button group with addons

You can group together addons as well:

{{button_group_addons_example}}
{% highlight html %}{{button_group_addons_example}}{% endhighlight %} {% include variables.html %}