{% set tag_name = tag_name|default(href ? 'a' : 'button') %}
{# Check for 'content_start' and 'content_end' content #}
{% set _content_start = block('content_start') %}
{% set _content_end = block('content_end') %}
{# Set a default icon if `is-slashed` exists and no icon (or block content) was supplied #}
{% if
  'is-slashed' in class and
  content_start_icon is empty and
  content_end_icon is empty and
  _content_start|trim is empty and
  _content_end|trim is empty
%}
  {% set content_start_icon = 'bell' %}
{% endif %}

<{{ tag_name }}
  class="c-button{% if class %} {{ class }}{% endif %}"
  {% if id %}
    id="{{ id }}"
  {% endif %}
  {% if aria_disabled %}
    aria-disabled="{{ aria_disabled }}"
  {% endif %}
  {% if aria_expanded %}
    aria-expanded="{{ aria_expanded }}"
  {% endif %}
  {% if aria_labelledby %}
    aria-labelledby="{{ aria_labelledby }}"
  {% endif %}
  {% if aria_describedby %}
    aria-describedby="{{ aria_describedby }}"
  {% endif %}
  {% if tag_name == 'a' %}
    href="{{ href|default('#') }}"
  {% elseif tag_name == 'button' %}
    {% if type %}type="{{ type }}"{% endif %}
    {% if disabled %}
      disabled
    {% endif %}
  {% endif %}
>
  {% if _content_start|trim or content_start_icon %}
    <span class="c-button__extra">
      {% block content_start %}
        {% if content_start_icon %}
          {% include '@cloudfour/components/icon/icon.twig' with {
            name: content_start_icon
          } only %}
        {% endif %}
      {% endblock %}
    </span>
  {% endif %}
  <span class="c-button__content">
    {% block content %}
      {{ label|default('Hello world') }}
    {% endblock %}
  </span>
  {% if _content_end|trim or content_end_icon %}
    <span class="c-button__extra">
      {% block content_end %}
        {% if content_end_icon %}
          {% include '@cloudfour/components/icon/icon.twig' with {
            name: content_end_icon
          } only %}
        {% endif %}
      {% endblock %}
    </span>
  {% endif %}
</{{ tag_name }}>