toolbar-button.twig

{# Extra classes variable added to be sure that modifiers will
appear after main classes #}
{%
  set classes = [
    'toolbar-button',
    icon ? 'toolbar-button--icon--' ~ icon : '',
  ]
%}

{% if modifiers is iterable %}
  {% set classes = classes|merge(modifiers|map(modifier => "toolbar-button--#{modifier}")) %}
{% endif %}

{% if extra_classes is iterable %}
  {% set classes = classes|merge(extra_classes) %}
{% endif %}

{% if text and text|length > 1 %}
  {# We take the first two letters of the button text to use as a fallback when
  the toolbar button does not have a pre-assigned icon. #}
  {% set icon_text = text|slice(0, 2)|join('') %}
  {% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}
{% endif %}

<{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
  {% if action %}
    <span data-toolbar-action class="visually-hidden">{{ action }}</span>
  {% endif %}
  {% block content %}
    {% if text %}
      <span class="toolbar-button__label" data-toolbar-text>{{~ text ~}}</span>
    {% endif %}
  {% endblock %}

</{{ html_tag|default('button') }}>

File

core/modules/navigation/components/toolbar-button/toolbar-button.twig

View source 
  1. {# Extra classes variable added to be sure that modifiers will

  2. appear after main classes #}

  3. {%

  4.   set classes = [

  5.     'toolbar-button',

  6.     icon ? 'toolbar-button--icon--' ~ icon : '',

  7.   ]

  8. %}

  9. 

  10. {% if modifiers is iterable %}

  11.   {% set classes = classes|merge(modifiers|map(modifier => "toolbar-button--#{modifier}")) %}

  12. {% endif %}

  13. 

  14. {% if extra_classes is iterable %}

  15.   {% set classes = classes|merge(extra_classes) %}

  16. {% endif %}

  17. 

  18. {% if text and text|length > 1 %}

  19.   {# We take the first two letters of the button text to use as a fallback when

  20.   the toolbar button does not have a pre-assigned icon. #}

  21.   {% set icon_text = text|slice(0, 2)|join('') %}

  22.   {% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}

  23. {% endif %}

  24. 

  25. <{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>

  26.   {% if action %}

  27.     <span data-toolbar-action class="visually-hidden">{{ action }}</span>

  28.   {% endif %}

  29.   {% block content %}

  30.     {% if text %}

  31.       <span class="toolbar-button__label" data-toolbar-text>{{~ text ~}}</span>

  32.     {% endif %}

  33.   {% endblock %}

  34. 

  35. </{{ html_tag|default('button') }}>