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

Buttons

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

Button White Light Dark Black Link

Primary Info Success Warning Danger

{% highlight html %} Button Primary Info Success Warning Danger Link {% endhighlight %}

Sizes

Small Normal Medium Large

{% highlight html %} Small Normal Medium Large {% endhighlight %}

Styles

Outlined

Outlined Outlined Outlined Outlined Outlined

{% highlight html %} Outlined Outlined Outlined Outlined Outlined {% endhighlight %}

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

Inverted Inverted Inverted Inverted

{% highlight html %} Inverted Inverted Inverted Inverted {% endhighlight %}

States

Normal

Normal Normal Normal Normal Normal Normal

{% highlight html %} Normal Normal Normal Normal Normal Normal {% endhighlight %}

Hover

Hover Hover Hover Hover Hover Hover

{% highlight html %} Hover Hover Hover Hover Hover Hover {% endhighlight %}

Focus

Focus Focus Focus Focus Focus Focus

{% highlight html %} Focus Focus Focus Focus Focus Focus {% endhighlight %}

Active

Active Active Active Active Active Active

{% highlight html %} Active Active Active Active Active Active {% endhighlight %}

Loading

Loading Loading Loading Loading Loading Loading

{% highlight html %} Loading Loading Loading Loading Loading Loading {% endhighlight %}

Disabled

Disabled Disabled Disabled Disabled Disabled Disabled

{% highlight html %} Disabled Disabled Disabled Disabled Disabled Disabled {% endhighlight %}

With Font Awesome icons

GitHub Twitter Save Delete

GitHub GitHub GitHub GitHub

{% highlight html %} GitHub Twitter Save Delete Delete {% 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.

{% highlight html %}

{% endhighlight %}

Button group

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

{% highlight html %}

{% endhighlight %}

Button addons

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

Left Center Right

{% highlight html %}

Left Center Right

{% endhighlight %}

Button group with addons

You can group together addons as well:

Bold Italic Underline

Left Center Right

{% highlight html %}

Left Center Right

{% endhighlight %}