Button

<a class="btn cursor-pointer inline-flex items-center  bg-primary justify-between text-white py-4 px-6 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

    <span class="shrink-0">
        Button
    </span>

</a>
{% set tag = tag|default('a') %}
{% set label = label %}
{% set link = link %}
{% set type = type %}
{% set style = style|default('primary') %}
{% set size = size|default('default') %}
{% set icon = icon %}
{% set classes = classes %}
{% set blank = blank %}

{% set styles = {
    'primary': 'bg-primary justify-between text-white',
    'gray-700': 'bg-gray-700 justify-between text-white',
    'link': 'flex-row-reverse justify-end',
    'white': 'bg-white',
} %}

{% set sizes = {
    'default': 'py-4 px-6',
    'even': 'py-5 px-5',
    'sm': 'py-2 px-4',
    'none': '',
} %}

<{{ tag }}
    {% if tag == 'a' and link %}href="{{ link }}" {% endif %}
class="btn cursor-pointer inline-flex items-center {{ classes }} {{ style ? styles[style] : '' }} {{ size ? sizes[size] : '' }} rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95"
{% if blank %} target="_blank"{% endif %}
    {% if type %} type="{{ type }}"{% endif %}>

{% if label %}
    <span class="shrink-0">
            {{ label }}
        </span>
{% endif %}

    {% if icon and icon.name %}
        {% render "@icon" with {
            name: icon.name,
            size: 'sm',
            classes: icon.classes
        } %}
    {% endif %}
</{{ tag }}>
{
  "label": "Button"
}

No notes defined.