button

// src/components/elements/button/button.twig

{% set additional_attributes_string %}
{% for attribute in additional_attributes %}
	{{ attribute[0] }}="{{ attribute[1] }}"
{% endfor %}
{% endset %}

{% set tag = url ? "a" : "button" %}
{% set icon_pos = icon_position|default("left") %}

<{{ tag }}
	{{ attributes }}
	class="
		Button
		{% if size == "small" %}Button--small{% endif %}
		{% if icon_only %}Button--iconOnly{% endif %}
		{% if icon and icon_pos == "right" %}Button--iconRight{% endif %}
		{% for modifier in modifiers %} Button--{{ modifier }}{% endfor %}
		{{ classes|join(" ") }}
	"
	{% if tag == "button" %}
		type="{{ type|default("button") }}"
		{% if disabled %} disabled{% endif %}
	{% else %}
		href="{{ url }}"
		{% if target %}target="{{ target }}"{% endif %}
	{% endif %}
	{% if hidden %}hidden{% endif %}
	{{ additional_attributes_string }}
>
	{% if icon and icon|trim|length > 0 and icon_pos == "left" %}
		<span class="Button-icon">
			{% include "@elements/icon/icon.twig" with {
				name: icon,
			} only %}
		</span>
	{% endif %}
	<span class="Button-label{% if icon_only %} u-hiddenVisually{% endif %}">
		{{ label }}
	</span>
	{% if icon and icon|trim|length > 0 and icon_pos == "right" %}
		<span class="Button-icon">
			{% include "@elements/icon/icon.twig" with {
				name: icon,
			} only %}
		</span>
	{% endif %}
</{{ tag }}>