{% macro button(
            class=false,
            id=false,
            for=false,
            input_id=false,
            name=false,
            checked=false,
            disabled=false,
            el="button",
            text,
            href=false,
            icon_left=false,
            icon_right=false,
            icon_path=false,
            custom_attr_array=[]) %}

    {# Default text if button() is called with no other arguments #}
    {% if icon_left == false and icon_right == false and text == undefined %}
        {% set text = "Get It Now" %}
    {% endif %}

    {# Defaults for <a> buttons #}
    {% if href %} {# if an href is passed in, automatically change the el to 'a' #}
        {% set el ="a" %}
    {% endif %}

    {# Defaults for checkbox & radio buttons #}
    {% set input_type = false %}
    {% if el == "checkbox" or el == "radio" %}
        {% set input_type = el %}
        {% set el = "label" %}
        {# need a class hook to strip off button styles for input buttons and apply them to the button inner #}
        {% set class = class + " luci-button--input" %} 
        
        {% if input_id == false %}
            {% set input_id = "luci-button--" + range(0, 100000) | random %}
        {% endif %}
        {% set for = input_id %}
    {% endif %}

    {# Modifier classes for icon buttons #}
    {% if icon_left or icon_right %}
        {% set class = class + " luci-button--with-icons" %}
    {% endif %}

    {# Add --disabled modifier class for <a> buttons that don't have a disabled attribute #}
    {% if disabled %}
        {% set class = class + " luci-button--disabled" %}
    {% endif %}

    {# Render actual button markup here #}
    <{{ el }} 
        class="luci-button{{ " " + class if class }}" 
        {% if href %}   href="{{ href }}"   {% endif %}
        {% if id %}     id="{{ id }}"       {% endif %}
        {% if for %}    for="{{ for }}"     {% endif %}
        {{ 'disabled' if el == "button" and disabled }}
        {% if el == "label" %} 
            role="button" 
            {% if checked %}
                aria-pressed="true"
            {% else %}
                aria-pressed="false"
            {% endif %}
        {% endif %}
        {% if custom_attr_array %}
          {% for attr in custom_attr_array %}
              {{ attr.name }} = "{{ attr.value }}" 
          {% endfor %}
        {% endif %}
    >
        {% if input_type %}
            <input 
                id="{{ input_id }}" 
                type="{{ input_type }}" 
                class="luci-button__input"
                {% if name %} name="{{ name }}" {% endif %}
                {{ 'checked' if checked }}
                {{ 'disabled' if disabled }}
            >
        {% endif %}
        {% if icon_left or icon_right or input_type %} 
            {# use display: flex; to vertically align icons with text, <button> elements cannot be a flex parent, so we need an inner wrapper to set the display: flex; context #}
            <span class="luci-button__inner"> 
            {% if icon_left %}
                {{ icon(class="luci-button__icon luci-button__icon--left", name=icon_left, path=icon_path) }}
            {% endif %}
        {% endif %}
            
        {% if text and (icon_left or icon_right or input_type) %}
            <span class="luci-button__text">
        {% endif %}
        
        {{ text }}
        
        {% if text and (icon_left or icon_right or input_type) %}
            </span>
        {% endif %}

        {% if icon_left or icon_right or input_type %}
            {% if icon_right %}
                {{ icon(class="luci-button__icon luci-button__icon--right", name=icon_right, path=icon_path) }}
            {% endif %}
            </span>
        {% endif %}
    </{{ el }}>
{% endmacro %}