Button Complete

  <a href="" class="o-button u-theme--button">Button Default</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button disabled">Button - Disabled</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button o-button--lighter">Button - Lighter</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button--outline">Button Outline</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button--simple">Button Simple</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button--small">Button Small</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button o-button--outline o-button--toggle o-button--small js-toggle"><span class="u-icon u-icon--xs u-path-fill--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__plus</title><path d="M10,4H6V0H4V4H0V6H4v4H6V6h4Z" fill="#9b9b9b"/></svg>
</span></a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}

  <a href="" class="o-button u-theme--button"><span class="u-icon u-icon--xs u-path-fill--white"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><title>o-icon__search</title><path d="M9.91,8.5,7.43,6A4,4,0,1,0,4,8a4,4,0,0,0,2-.57L8.5,9.91ZM2,4A2,2,0,1,1,4,6,2,2,0,0,1,2,4Z" fill="#777"/></svg>
</span>Search</a>

{% if button_default %}
  <a href="" class="o-button {{ button_default.class }}">{% if button_default.icon %}<span class="u-icon u-icon--xs u-path-fill--white">{% include '@atoms/icons/' ~ button_default.icon ~ '.twig' %}</span>{% endif %}{{ button_default.text }}</a>
{% endif %}