A clickable button.
Props:
- as: button (default), a
- type: submit
- color: none, primary, secondary, tertiary, white
- size: xsmall, small, medium (default), large, xlarge
- fullWidth
- nowrap: true (default), false
- href
- title
- rel
- disabled
- text
<button x-data @click.prevent="$dispatch('clicked')" @keydown.prevent="$dispatch('clicked')" class="azalea-push-button azalea-touch-action inline-flex grow-0 items-center py-2 px-4 border border-transparent rounded-sm no-underline hover:no-underline font-body font-normal text-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500 whitespace-nowrap bg-tertiary-300 hover:bg-tertiary-200 text-tertiary-900 text-lg">
Tertiary Button
</button>
{% apply spaceless %}
{% set classes = [
'azalea-push-button azalea-touch-action',
'inline-flex grow-0 items-center',
'py-2 px-4',
'border border-transparent',
'rounded-sm',
'no-underline hover:no-underline',
'font-body font-normal text-center',
'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary-500'
] %}
{# Prop: nowrap #}
{% if nowrap != 'false' %}
{% set classes = classes|merge(['whitespace-nowrap']) %}
{% endif %}
{# Prop: color #}
{% if color == 'none' %}
{% set classes = classes|merge(['shadow-none hover:shadow-none']) %}
{% elseif color == 'primary' %}
{# azalea-primary-button #}
{% set classes = classes|merge(['bg-primary-800 hover:bg-primary-600 text-white']) %}
{% elseif color == 'secondary' %}
{# azalea-secondary-button #}
{% set classes = classes|merge(['bg-secondary-500 hover:bg-secondary-600 text-white']) %}
{% elseif color == 'tertiary' %}
{# azalea-tertiary-button #}
{% set classes = classes|merge(['bg-tertiary-300 hover:bg-tertiary-200 text-tertiary-900']) %}
{% elseif color == 'white' %}
{% set classes = classes|merge(['bg-white hover:bg-black hover:text-white text-black']) %}
{% else %}
{% set classes = classes|merge(['bg-transparent border-tertiary-400 hover:bg-tertiary-100']) %}
{% endif %}
{# Prop: size #}
{% if size == 'xlarge' %}
{% set classes = classes|merge(['text-2xl']) %}
{% elseif size == 'large' %}
{% set classes = classes|merge(['text-xl']) %}
{% elseif size == 'medium' %}
{% set classes = classes|merge(['text-lg']) %}
{% elseif size == 'small' %}
{% set classes = classes|merge(['text-sm']) %}
{% elseif size == 'xsmall' %}
{% set classes = classes|merge(['text-xs']) %}
{% else %}
{% set classes = classes|merge(['text-lg']) %}
{% endif %}
{# Prop: fullWidth #}
{% if fullWidth == 'true' %}
{% set classes = classes|merge(['w-full justify-center']) %}
{% endif %}
{# Prop: type #}
{# Prop: disabled #}
{# Prop: title #}
{# Prop: href #}
{# Prop: rel #}
{# prop: as #}
{% set tag = 'button' %}
{% if as and as == 'a' %}
{% set tag = 'a' %}
{% endif %}
<{{ tag }}
{% if tag == 'button' and type != 'submit' %}x-data @click.prevent="$dispatch('clicked')" @keydown.prevent="$dispatch('clicked')" {% endif%}
class="{{ classes|join(' ') }}"
{% if href %}href="{{ href }}" {% endif %}
{% if title %}title="{{ title }}" {% endif %}
{% if rel %}rel="{{ rel }}" {% endif %}
{% if disabled %}disabled {% endif %}
{% if type %}type="{{ type }}" {% endif %}
>
{{ text|raw }}
{% block content %}{% endblock content %}
</{{ tag }}>
{% endapply %}