2016-09-11 11:00:49 +00:00
---
layout: documentation
doc-tab: elements
doc-subtab: button
---
{% include subnav-elements.html %}
< section class = "section" >
< div class = "container" >
< h1 class = "title" > Buttons< / h1 >
< h2 class = "subtitle" >
The classic < strong > button< / strong > , in different colors, sizes, and states
< / h2 >
< hr >
2016-10-30 20:02:48 +00:00
{% capture button_example %}
< div class = "block" >
< a class = "button" > Button< / a >
< a class = "button is-white" > White< / a >
< a class = "button is-light" > Light< / a >
< a class = "button is-dark" > Dark< / a >
< a class = "button is-black" > Black< / a >
< a class = "button is-link" > Link< / a >
< / div >
< div class = "block" >
< a class = "button is-primary" > Primary< / a >
< a class = "button is-info" > Info< / a >
< a class = "button is-success" > Success< / a >
< a class = "button is-warning" > Warning< / a >
< a class = "button is-danger" > Danger< / a >
< / div >
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_example}}
< / div >
< div class = "column" >
2016-09-11 11:00:49 +00:00
{% highlight html %}
2016-10-30 20:02:48 +00:00
{{button_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< hr >
< h3 class = "title" > Sizes< / h3 >
2016-10-30 20:02:48 +00:00
{% capture button_sizes_example %}
2016-09-11 11:00:49 +00:00
< a class = "button is-small" > Small< / a >
< a class = "button" > Normal< / a >
< a class = "button is-medium" > Medium< / a >
< a class = "button is-large" > Large< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_sizes_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_sizes_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< hr >
< h3 class = "title" > Styles< / h3 >
< h4 class = "subtitle" > Outlined< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_outlined_example %}
2016-09-11 11:00:49 +00:00
< a class = "button is-outlined" > Outlined< / a >
< a class = "button is-primary is-outlined" > Outlined< / a >
< a class = "button is-info is-outlined" > Outlined< / a >
< a class = "button is-success is-outlined" > Outlined< / a >
< a class = "button is-danger is-outlined" > Outlined< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_outlined_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_outlined_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< h4 class = "subtitle" > Inverted (the text color becomes the background color, and vice-versa)< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_inverted_example %}
2016-09-11 11:00:49 +00:00
< a class = "button is-primary is-inverted" > Inverted< / a >
< a class = "button is-info is-inverted" > Inverted< / a >
< a class = "button is-success is-inverted" > Inverted< / a >
< a class = "button is-danger is-inverted" > Inverted< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
< div class = "notification is-primary" >
{{button_inverted_example}}
2016-09-11 11:00:49 +00:00
< / div >
2016-10-30 20:02:48 +00:00
< / div >
< div class = "column" >
{% highlight html %}
{{button_inverted_example}}
2016-10-30 20:24:23 +00:00
{% endhighlight %}
< / div >
< / div >
< h4 class = "subtitle" > Invert Outlined (the invert color becomes the text and border colors)< / h4 >
{% capture button_inverted_outlined_example %}
< a class = "button is-primary is-inverted is-outlined" > Invert Outlined< / a >
< a class = "button is-info is-inverted is-outlined" > Invert Outlined< / a >
< a class = "button is-success is-inverted is-outlined" > Invert Outlined< / a >
< a class = "button is-danger is-inverted is-outlined" > Invert Outlined< / a >
{% endcapture %}
< div class = "columns" >
< div class = "column" >
< div class = "notification is-primary" >
{{button_inverted_outlined_example}}
< / div >
< / div >
< div class = "column" >
{% highlight html %}
{{button_inverted_outlined_example}}
2016-10-30 20:02:48 +00:00
{% endhighlight %}
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< hr >
< h3 class = "title" > States< / h3 >
2016-10-29 20:51:13 +00:00
< h4 class = "subtitle" > Normal< / h4 >
2016-09-11 11:00:49 +00:00
2016-10-30 20:02:48 +00:00
{% capture button_normal_example %}
2016-10-29 20:51:13 +00:00
< a class = "button" > Normal< / a >
< a class = "button is-primary" > Normal< / a >
< a class = "button is-info" > Normal< / a >
< a class = "button is-success" > Normal< / a >
< a class = "button is-warning" > Normal< / a >
< a class = "button is-danger" > Normal< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_normal_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_normal_example}}
2016-10-29 20:51:13 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-10-29 20:51:13 +00:00
< h4 class = "subtitle" > Hover< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_hover_example %}
2016-10-29 20:51:13 +00:00
< a class = "button is-hovered" > Hover< / a >
< a class = "button is-primary is-hovered" > Hover< / a >
< a class = "button is-info is-hovered" > Hover< / a >
< a class = "button is-success is-hovered" > Hover< / a >
< a class = "button is-warning is-hovered" > Hover< / a >
< a class = "button is-danger is-hovered" > Hover< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_hover_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_hover_example}}
2016-10-29 20:51:13 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-10-29 20:51:13 +00:00
< h4 class = "subtitle" > Focus< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_focus_example %}
2016-10-29 20:51:13 +00:00
< a class = "button is-focused" > Focus< / a >
< a class = "button is-primary is-focused" > Focus< / a >
< a class = "button is-info is-focused" > Focus< / a >
< a class = "button is-success is-focused" > Focus< / a >
< a class = "button is-warning is-focused" > Focus< / a >
< a class = "button is-danger is-focused" > Focus< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_focus_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_focus_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< h4 class = "subtitle" > Active< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_active_example %}
2016-09-11 11:00:49 +00:00
< a class = "button is-active" > Active< / a >
< a class = "button is-primary is-active" > Active< / a >
< a class = "button is-info is-active" > Active< / a >
< a class = "button is-success is-active" > Active< / a >
< a class = "button is-warning is-active" > Active< / a >
< a class = "button is-danger is-active" > Active< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_active_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_active_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
2016-10-29 20:51:13 +00:00
< h4 class = "subtitle" > Loading< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_loading_example %}
2016-10-29 20:51:13 +00:00
< a class = "button is-loading" > Loading< / a >
< a class = "button is-primary is-loading" > Loading< / a >
< a class = "button is-info is-loading" > Loading< / a >
< a class = "button is-success is-loading" > Loading< / a >
< a class = "button is-warning is-loading" > Loading< / a >
< a class = "button is-danger is-loading" > Loading< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_loading_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_loading_example}}
2016-10-29 20:51:13 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-10-29 20:51:13 +00:00
2016-09-11 11:00:49 +00:00
< h4 class = "subtitle" > Disabled< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_disabled_example %}
2016-09-11 11:00:49 +00:00
< a class = "button is-disabled" > Disabled< / a >
< a class = "button is-primary is-disabled" > Disabled< / a >
< a class = "button is-info is-disabled" > Disabled< / a >
< a class = "button is-success is-disabled" > Disabled< / a >
< a class = "button is-warning is-disabled" > Disabled< / a >
< a class = "button is-danger is-disabled" > Disabled< / a >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_disabled_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_disabled_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
2016-09-11 11:00:49 +00:00
< h4 class = "subtitle" > With Font Awesome icons< / h4 >
2016-10-30 20:02:48 +00:00
{% capture button_fa_example %}
2016-10-30 10:41:53 +00:00
< p class = "control" >
2016-10-30 20:02:48 +00:00
< a class = "button" >
2016-10-30 10:41:53 +00:00
< span class = "icon is-small" >
2016-10-30 20:02:48 +00:00
< i class = "fa fa-bold" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
2016-10-30 20:02:48 +00:00
< i class = "fa fa-italic" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
< / a >
< a class = "button" >
2016-10-30 20:02:48 +00:00
< span class = "icon is-small" >
< i class = "fa fa-underline" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
< / a >
< / p >
< p class = "control" >
2016-10-30 20:02:48 +00:00
< a class = "button" >
< span class = "icon" >
< i class = "fa fa-github" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > GitHub< / span >
2016-10-30 10:41:53 +00:00
< / a >
2016-10-30 20:02:48 +00:00
< a class = "button is-primary" >
2016-10-30 10:41:53 +00:00
< span class = "icon" >
2016-10-30 20:02:48 +00:00
< i class = "fa fa-twitter" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > Twitter< / span >
2016-10-30 10:41:53 +00:00
< / a >
2016-10-30 20:02:48 +00:00
< a class = "button is-success" >
< span class = "icon is-small" >
< i class = "fa fa-check" > < / i >
< / span >
< span > Save< / span >
< / a >
< a class = "button is-danger is-outlined" >
< span > Delete< / span >
< span class = "icon is-small" >
< i class = "fa fa-times" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
< / a >
< / p >
< p class = "control" >
2016-10-30 20:02:48 +00:00
< a class = "button is-small" >
2016-10-30 10:41:53 +00:00
< span class = "icon is-small" >
2016-10-30 20:02:48 +00:00
< i class = "fa fa-github" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > GitHub< / span >
2016-10-30 10:41:53 +00:00
< / a >
2016-10-30 20:02:48 +00:00
< a class = "button" >
2016-10-30 10:41:53 +00:00
< span class = "icon" >
2016-10-30 20:02:48 +00:00
< i class = "fa fa-github" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > GitHub< / span >
2016-10-30 10:41:53 +00:00
< / a >
2016-10-30 20:02:48 +00:00
< a class = "button is-medium" >
< span class = "icon" >
< i class = "fa fa-github" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > GitHub< / span >
2016-10-30 10:41:53 +00:00
< / a >
< a class = "button is-large" >
2016-10-30 20:02:48 +00:00
< span class = "icon is-medium" >
< i class = "fa fa-github" > < / i >
2016-10-30 10:41:53 +00:00
< / span >
2016-10-30 20:02:48 +00:00
< span > GitHub< / span >
2016-10-30 10:41:53 +00:00
< / a >
< / p >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "columns" >
< div class = "column" >
{{button_fa_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_fa_example}}
2016-10-30 10:41:53 +00:00
{% endhighlight %}
2016-10-30 20:02:48 +00:00
< / div >
< / div >
< div class = "columns" >
< div class = "column" >
< div class = "content" >
< p >
< span class = "tag is-success" > New!< / span >
< / p >
< p >
If the button only contains an icon, Bulma will make sure the button remains < strong > square< / strong > , no matter the size of the button < em > or< / em > of the icon.
< / p >
2016-10-30 10:41:53 +00:00
< / div >
2016-10-30 20:02:48 +00:00
{% capture button_only_icon_example %}
< p class = "control" >
< a class = "button is-small" >
< span class = "icon is-small" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< / p >
< p class = "control" >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button" >
< span class = "icon" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< / p >
< p class = "control" >
< a class = "button is-medium" >
< span class = "icon is-small" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button is-medium" >
< span class = "icon" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button is-medium" >
< span class = "icon is-medium" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< / p >
< p class = "control" >
< a class = "button is-large" >
< span class = "icon is-small" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button is-large" >
< span class = "icon" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button is-large" >
< span class = "icon is-medium" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< a class = "button is-large" >
< span class = "icon is-large" >
< i class = "fa fa-header" > < / i >
< / span >
< / a >
< / p >
{% endcapture %}
{{button_only_icon_example}}
< / div >
< div class = "column" >
{% highlight html %}
{{button_only_icon_example}}
{% endhighlight %}
< / div >
< / div >
2016-10-30 10:41:53 +00:00
2016-09-11 11:00:49 +00:00
< hr >
< h3 class = "title" > Button group< / h3 >
< div class = "content" >
< p > If you want to < strong > group< / strong > buttons together, use the < code > is-grouped< / code > modifier on the < code > control< / code > container:< / p >
< / div >
2016-10-30 20:02:48 +00:00
{% capture button_group_example %}
2016-09-11 11:00:49 +00:00
< div class = "control is-grouped" >
< p class = "control" >
< a class = "button is-primary" >
Save changes
< / a >
< / p >
< p class = "control" >
< a class = "button" >
Cancel
< / a >
< / p >
< p class = "control" >
< a class = "button is-danger" >
Delete post
< / a >
< / p >
< / div >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "example" >
{{button_group_example}}
< / div >
{% highlight html %}
{{button_group_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
< hr >
< h3 class = "title" > Button addons< / h3 >
< div class = "content" >
< p > If you want to use buttons as < strong > addons< / strong > , use the < code > has-addons< / code > modifier on the < code > control< / code > container:< / p >
< / div >
2016-10-30 20:02:48 +00:00
{% capture button_addons_example %}
2016-09-11 11:00:49 +00:00
< p class = "control has-addons" >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-left" > < / i >
< / span >
< span > Left< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-center" > < / i >
< / span >
< span > Center< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-right" > < / i >
< / span >
< span > Right< / span >
< / a >
< / p >
2016-10-30 20:02:48 +00:00
{% endcapture %}
< div class = "example" >
{{button_addons_example}}
< / div >
{% highlight html %}
{{button_addons_example}}
2016-10-30 10:41:53 +00:00
{% endhighlight %}
< hr >
< h3 class = "title" > Button group with addons< / h3 >
< div class = "content" >
< p > You can group together addons as well:< / p >
< / div >
2016-10-30 20:02:48 +00:00
{% capture button_group_addons_example %}
< div class = "control is-grouped" >
< p class = "control has-addons" >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-bold" > < / i >
< / span >
< span > Bold< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-italic" > < / i >
< / span >
< span > Italic< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-underline" > < / i >
< / span >
< span > Underline< / span >
< / a >
< / p >
< p class = "control has-addons" >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-left" > < / i >
< / span >
< span > Left< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-center" > < / i >
< / span >
< span > Center< / span >
< / a >
< a class = "button" >
< span class = "icon is-small" >
< i class = "fa fa-align-right" > < / i >
< / span >
< span > Right< / span >
< / a >
< / p >
< / div >
{% endcapture %}
< div class = "example" >
{{button_group_addons_example}}
< / div >
2016-10-30 10:41:53 +00:00
{% highlight html %}
2016-10-30 20:02:48 +00:00
{{button_group_addons_example}}
2016-09-11 11:00:49 +00:00
{% endhighlight %}
< / div >
< / section >
