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

Small Normal Medium Large

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

Outlined Outlined Outlined Outlined Outlined

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

Inverted Inverted Inverted Inverted

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

Loading Loading Loading Loading Loading Loading

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

Active Active Active Active Active Active

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

Disabled Disabled Disabled Disabled Disabled Disabled

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

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

{% highlight html %}

{% endhighlight %}

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

{% highlight html %}

{% endhighlight %}