bulma/docs/documentation/elements/button.html

571 lines
14 KiB
HTML
Raw Normal View History

---
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">
{% highlight html %}
2016-10-30 20:02:48 +00:00
{{button_example}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
<hr>
<h3 class="title">Sizes</h3>
2016-10-30 20:02:48 +00:00
{% capture button_sizes_example %}
<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}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
<hr>
<h3 class="title">Styles</h3>
<h4 class="subtitle">Outlined</h4>
2016-10-30 20:02:48 +00:00
{% capture button_outlined_example %}
<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}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
<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 %}
<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">
2017-04-01 12:31:36 +00:00
<div class="callout is-primary">
2016-10-30 20:02:48 +00:00
{{button_inverted_example}}
</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">
2017-04-01 12:31:36 +00:00
<div class="callout is-primary">
2016-10-30 20:24:23 +00:00
{{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>
<hr>
<h3 class="title">States</h3>
2016-10-29 20:51:13 +00:00
<h4 class="subtitle">Normal</h4>
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}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
<h4 class="subtitle">Active</h4>
2016-10-30 20:02:48 +00:00
{% capture button_active_example %}
<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}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
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
<h4 class="subtitle">Disabled</h4>
2016-10-30 20:02:48 +00:00
{% capture button_disabled_example %}
2017-03-31 21:25:53 +00:00
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
<a class="button is-danger" title="Disabled button" disabled>Disabled</a>
2016-10-30 20:02:48 +00:00
{% endcapture %}
<div class="columns">
<div class="column">
2017-03-31 21:25:53 +00:00
<div class="block">{{button_disabled_example}}</div>
<div class="message is-danger">
<div class="message-body">
<p>The <code>is-disabled</code> CSS class has been deprecated in favor of the <code>disabled</code> HTML attribute. <a href="https://github.com/jgthms/bulma/issues/276">Learn more</a></p>
</div>
</div>
2016-10-30 20:02:48 +00:00
</div>
<div class="column">
{% highlight html %}
{{button_disabled_example}}
{% endhighlight %}
2016-10-30 20:02:48 +00:00
</div>
</div>
<h4 class="subtitle">With Font Awesome icons</h4>
2016-10-30 20:02:48 +00:00
{% capture button_fa_example %}
2017-03-12 17:37:22 +00:00
<p class="field">
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>
2017-03-12 17:37:22 +00:00
<p class="field">
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>
2017-03-12 17:37:22 +00:00
<p class="field">
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 %}
2017-03-12 17:37:22 +00:00
<p class="field">
<a class="button is-small">
2017-03-13 12:05:02 +00:00
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
2016-10-30 20:02:48 +00:00
</p>
2017-03-12 17:37:22 +00:00
<p class="field">
<a class="button">
2017-03-13 12:05:02 +00:00
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
<a class="button">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
2016-10-30 20:02:48 +00:00
</p>
2017-03-12 17:37:22 +00:00
<p class="field">
<a class="button is-medium">
2017-03-13 12:05:02 +00:00
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
<a class="button is-medium">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-medium">
2017-03-13 12:05:02 +00:00
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
2016-10-30 20:02:48 +00:00
</p>
2017-03-12 17:37:22 +00:00
<p class="field">
<a class="button is-large">
2017-03-13 12:05:02 +00:00
<span class="icon is-small">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
<a class="button is-large">
<span class="icon">
<i class="fa fa-header"></i>
</span>
</a>
<a class="button is-large">
2017-03-13 12:05:02 +00:00
<span class="icon is-medium">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
<a class="button is-large">
2017-03-13 12:05:02 +00:00
<span class="icon is-large">
<i class="fa fa-header"></i>
</span>
2017-03-12 17:37:22 +00:00
</a>
2016-10-30 20:02:48 +00:00
</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
<hr>
<h3 class="title">Button group</h3>
<div class="content">
2017-03-12 17:37:22 +00:00
<p>If you want to <strong>group</strong> buttons together, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
</div>
2016-10-30 20:02:48 +00:00
{% capture button_group_example %}
2017-03-12 17:37:22 +00:00
<div class="field 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}}
{% endhighlight %}
<hr>
<h3 class="title">Button addons</h3>
<div class="content">
2017-03-12 17:37:22 +00:00
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
</div>
2016-10-30 20:02:48 +00:00
{% capture button_addons_example %}
2017-03-12 17:37:22 +00:00
<div class="field has-addons">
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
</p>
<p class="control">
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-right"></i>
</span>
<span>Right</span>
</a>
</p>
</div>
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 %}
2017-03-12 17:37:22 +00:00
<div class="field has-addons">
<p class="control">
2016-10-30 20:02:48 +00:00
<a class="button">
<span class="icon is-small">
<i class="fa fa-bold"></i>
</span>
<span>Bold</span>
</a>
2017-03-12 17:37:22 +00:00
</p>
<p class="control">
2016-10-30 20:02:48 +00:00
<a class="button">
<span class="icon is-small">
<i class="fa fa-italic"></i>
</span>
<span>Italic</span>
</a>
2017-03-12 17:37:22 +00:00
</p>
<p class="control">
2016-10-30 20:02:48 +00:00
<a class="button">
<span class="icon is-small">
<i class="fa fa-underline"></i>
</span>
<span>Underline</span>
</a>
</p>
2017-03-12 17:37:22 +00:00
</div>
<div class="field has-addons">
<p class="control">
2016-10-30 20:02:48 +00:00
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-left"></i>
</span>
<span>Left</span>
</a>
2017-03-12 17:37:22 +00:00
</p>
<p class="control">
2016-10-30 20:02:48 +00:00
<a class="button">
<span class="icon is-small">
<i class="fa fa-align-center"></i>
</span>
<span>Center</span>
</a>
2017-03-12 17:37:22 +00:00
</p>
<p class="control">
2016-10-30 20:02:48 +00:00
<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}}
{% endhighlight %}
</div>
</section>