18F/web-design-standards

{% macro usaButton(label, modifier, type, additional_class, additional_attributes) %}
  <button
    class="usa-button {{ modifier }} {{ additional_class | default("") }}"
    type="{{ type ? type : "button" }}"
    {{ additional_attributes }}
  >
    {{- label -}}
    {% if add_icon %}{{- icon -}}{% endif %}
  </button>
{% endmacro %}

{# Twig loader requirement for macro to work. #}
{% import _self as button %}

{% if 'usa-button--outline usa-button--inverse' in modifier %}
  <div class="bg-base-darkest padding-1" style="max-width: fit-content">
{% endif %}

{% set icon %}
  <!-- @TODO: Allow size to be passed as a argument. -->
  <!-- Example: usa-icon--size-{3-9} -->
  <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
    <use xlink:href="./img/sprite.svg#{{ icon_name | default("add_circle_outline") }}"></use>
  </svg>
{% endset %}

{% if is_demo and 'usa-button--big' not in modifier %}
  {{ button.usaButton('Default', modifier, type) }}
  {{ button.usaButton('Hover', modifier, type, "usa-button--hover") }}
  {{ button.usaButton('Active', modifier, type, "usa-button--active") }}
  {{ button.usaButton('Focus', modifier, type, "usa-focus") }}
  {{ button.usaButton('Disabled', modifier, type, null, 'disabled') }}
  {{ button.usaButton('aria-disabled', modifier, type, null, 'aria-disabled="true"') }}
  {{ button.usaButton('Unstyled button', modifier, type, 'usa-button--unstyled') }}

{% else %}
  {{ button.usaButton('Default', modifier, type) }}

  {% if is_demo and 'usa-button--big' in modifier %}
    {{ button.usaButton('Disabled', modifier, type, null, 'disabled') }}
    {{ button.usaButton('aria-disabled', modifier, type, null, 'aria-disabled="true"') }}
    {{ button.usaButton('Unstyled button', modifier, type, 'usa-button--unstyled') }}
  {% endif %}
{% endif %}

{% if 'usa-button--outline usa-button--inverse' in modifier %}
  </div>
{% endif %}