{#
  Reusable button component.
  Available props:
    - label
    - icon
    - name
    - style: primary, secondary or warning
    - size: small, default
    - url: URL to navigate in case if button is the navigation link
    - class: additional class for the button

  Usage example:
    {% include 'components/button.twig' with {label: 'Label', icon: 'check', style: 'secondary', size: 'default'} %}
#}

{% set mainClass = 'docs-button' %}


{% set tag = 'button' %}

{% if url is not empty %}
  {% set tag = 'a' %}
{% endif %}

<{{tag}}
  {{ name is not empty ? 'name="' ~ name ~ '"': '' }}
  class="{{ mainClass }} {{ mainClass }}--{{ style|default('primary') }} {{ mainClass }}--{{ size|default('default') }} {{ icon ? mainClass ~ '--with-icon' : '' }} {{label ? mainClass ~ '--with-label' : ''}} {{ class ?? '' }}"
  {{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
>
  {% if icon %}
    <div class="{{mainClass}}__icon">
      {{ svg(icon) }}
    </div>
  {% endif %}

  {{ label }}
</{{tag}}>
