{#
Template for a button, has following properties:
 - _defaultClass: private, required, sets the foundational presentation.
 - buttonLink: boolean, if true specifies to use a link tag vs <button> tag.
 - button_modifiers: classes used to modify and provide variants.
 - button_icon: an Ionicon icon to render right before the label.
 - button_label: required, the main text of the button.
 - labelVisible: boolean, display label.
#}

{# Provide the defaultClass value. #}
{% set _defaultClass = _defaultClass|default('mds-button') %}

{# If buttonLink is specified, use a link tag, not a button tag. #}
{% if buttonLink %}
  {% include '@mds/button/button-link.twig' with {_defaultClass: 'mds-link'}%}
{% else %}
  {# Use a proper button tag. #}
  <button type="{{ button_type|default('button') }}" aria-label="{{ button_label }}" data-testid="mds-button" class="{{_defaultClass}} {{button_modifiers}}">
    {% if button_icon %}
{#      TODO: Import the ion component instead of duplicating the markup. #}
      <ion-icon aria-hidden="true" aria-label="{{ icon_aria_label }}" class="mds-button__ionicon" data-testid="ionicon" name="{{button_icon}}" alt="{{ icon_alt }}" role="img"></ion-icon>
    {% endif %}
    {% if labelVisible|default(true) %}
        <span class="mds-button__label">{{ button_label | escape }}</span>
    {% else %}
      <span class="mds-visually-hidden">{{ button_label | default(icon_alt) | default('Search') }}</span>
    {% endif %}

  </button>
{% endif %}