<div class="buttons" style="margin-bottom: 1em">
  <button class="button dn">
    <span>Button</span>
  </button>
  {% for status in site.data.colors.status %}
    <button class="button is-{{ status }}">
      <span>{{ status | capitalize }}</span>
    </button>
  {% endfor %}
</div>

<div class="buttons" style="margin-bottom: 1em">
  {% for status in site.data.colors.status %}
    <button class="button is-{{ status }} is-outlined">
      <span>{{ status | capitalize }}</span>
    </button>
  {% endfor %}
</div>

<div class="buttons" style="margin-bottom: 1em">
  {% for status in site.data.colors.status %}
    <button class="button is-{{ status }} is-light">
      <span>{{ status | capitalize }}</span>
    </button>
  {% endfor %}
</div>

<div class="buttons" style="margin-bottom: 1em">
  {% for status in site.data.colors.status %}
    <button class="button is-{{ status }} is-dark">
      <span>{{ status | capitalize }}</span>
    </button>
  {% endfor %}
</div>