---
title: Bulma's Modifiers Syntax
layout: docs
theme: start
doc-tab: start
doc-subtab: syntax
breadcrumb:
  - home
  - documentation
  - start
  - start-syntax
---

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