bulma/docs/documentation/overview/modifiers.html

---
title: Modifiers syntax
layout: documentation
doc-tab: overview
doc-subtab: modifiers
breadcrumb:
- home
- documentation
- overview
- overview-modifiers
---

{% capture button_example %}
<button class="button">
  Button
</button>
{% endcapture %}

{% capture button_primary_example %}
<button class="button is-primary">
  Button
</button>
{% endcapture %}

{% capture button_colors %}
<button class="button is-primary">
  Button
</button>
<button class="button is-link">
  Button
</button>
<button class="button is-info">
  Button
</button>
<button class="button is-success">
  Button
</button>
<button class="button is-warning">
  Button
</button>
<button class="button is-danger">
  Button
</button>
{% endcapture %}

{% capture button_sizes %}
<button class="button is-small">
  Button
</button>
<button class="button">
  Button
</button>
<button class="button is-medium">
  Button
</button>
<button class="button is-large">
  Button
</button>
{% endcapture %}

{% capture button_states %}
<button class="button is-primary is-outlined">
  Button
</button>
<button class="button is-loading">
  Button
</button>
<button class="button" disabled>
  Button
</button>
{% endcapture %}

{% capture button_combinations %}
<button class="button is-primary is-small" disabled>
  Button
</button>
<button class="button is-info is-loading">
  Button
</button>
<button class="button is-danger is-outlined is-large">
  Button
</button>
{% endcapture %}

<div class="columns">
  <div class="column">
    <p>Let's start with a simple <strong>button</strong> that uses the <code>"button"</code> CSS class:</p>
  </div>
  <div class="column">
    <p>
      {{button_example}}
    </p>
  </div>
  <div class="column is-half">
    {% highlight html %}{{button_example}}{% endhighlight %}
  </div>
</div>
<div class="columns">
  <div class="column">
    <p>By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you can modify the <strong>color</strong>:</p>
  </div>
  <div class="column">
    <p>
      {{button_primary_example}}
    </p>
  </div>
  <div class="column is-half">
    {% highlight html %}{{button_primary_example}}{% endhighlight %}
  </div>
</div>
<div class="columns">
  <div class="column">
    <div class="content">
      <p>You can use one of the <strong>6 main colors</strong>:</p>
      <ul>
        <li><code>is-primary</code></li>
        <li><code>is-link</code></li>
        <li><code>is-info</code></li>
        <li><code>is-success</code></li>
        <li><code>is-warning</code></li>
        <li><code>is-danger</code></li>
      </ul>
    </div>
  </div>
  <div class="column">
    <p class="field">
      <button class="button is-primary">Button</button>
    </p>
    <p class="field">
      <button class="button is-link">Button</button>
    </p>
    <p class="field">
      <button class="button is-info">Button</button>
    </p>
    <p class="field">
      <button class="button is-success">Button</button>
    </p>
    <p class="field">
      <button class="button is-warning">Button</button>
    </p>
    <p class="field">
      <button class="button is-danger">Button</button>
    </p>
  </div>
  <div class="column is-half">
    <div class="bd-highlight-full">
      {% highlight html %}{{ button_colors }}{% endhighlight %}
    </div>
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>You can also alter the <strong>size</strong>:</p>
      <ul>
        <li><code>is-small</code></li>
        <li><code>is-medium</code></li>
        <li><code>is-large</code></li>
      </ul>
    </div>
  </div>
  <div class="column">
    <p class="field">
      <button class="button is-small">Button</button>
    </p>
    <p class="field">
      <button class="button">Button</button>
    </p>
    <p class="field">
      <button class="button is-medium">Button</button>
    </p>
    <p class="field">
      <button class="button is-large">Button</button>
    </p>
  </div>
  <div class="column is-half">
    {% highlight html %}{{ button_sizes }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      <p>Or the <strong>style</strong> or <strong>state</strong>:</p>
      <ul>
        <li><code>is-outlined</code></li>
        <li><code>is-loading</code></li>
        <li><code>[disabled]</code></li>
      </ul>
    </div>
  </div>
  <div class="column">
    <p class="field">
      <button class="button is-primary is-outlined">Button</button>
    </p>
    <p class="field">
      <button class="button is-loading">Button</button>
    </p>
    <p class="field">
      <button class="button" disabled>Button</button>
    </p>
  </div>
  <div class="column is-half">
    {% highlight html %}{{ button_states }}{% endhighlight %}
  </div>
</div>

<div class="columns">
  <div class="column">
    <div class="content">
      As a result, it's very easy to <strong>combine modifiers:</strong>
    </div>
  </div>
  <div class="column">
    <p class="field">
      <button class="button is-primary is-small" disabled>Button</button>
    </p>
    <p class="field">
      <button class="button is-info is-loading">Button</button>
    </p>
    <p class="field">
      <button class="button is-danger is-outlined is-large">Button</button>
    </p>
  </div>
  <div class="column is-half">
    {% highlight html %}{{ button_combinations }}{% endhighlight %}
  </div>
</div>