twigfiddle.com - Fiddle o3sptr v1 - Created on December 2, 2019 21:47

File

{% embed 'button.html.twig' with {
    type: 'submit',
    label: 'send data',
    disabled: true,
    modifiers: ['large', 'dark'],
} only %}{% endembed -%}

{% embed 'button1.html.twig' %}{% endembed %}

{% embed 'button2.html.twig' with {
    label: 'load more',
} only %}{% endembed %}

File

{% set properties = properties|default({
    modifiers: modifiers|default([]),
    type: type|default('button'),
    label: label,
    icon: icon|default,
    disabled: disabled|default(false),
}) %}

{% for key, value in properties.modifiers %}
    {% set properties = properties|merge({
        modifiers: {(key): ('button--' ~ value)} + properties.modifiers,
    }) %}
{% endfor %}

{% with properties only %}
    {% block template %}
        <button class="button {{ modifiers|join(' ') }} js-button"
                type="{{ type }}"
                {{ disabled ? 'disabled' }}>
            <span class="button__label">{{ label }}</span>

            {% if icon %}
                <span class="button__icon">{{ icon }}</span>
            {% endif %}
        </button>
    {% endblock %}
{% endwith %}

File

{% extends 'button.html.twig' %}

{% set label = label|default('click me') %}
{% set modifiers = (modifiers|default([]))|merge(['default']) %}

File

{% extends 'button1.html.twig' %}

{% block template %}
    <button>{{ label }}</button>
{% endblock %}

Format