Skip to content

tag

The tag macro is used to render a single tag on the page. Such tag can be rendered in a few styling variants, receive a button that allows to remove it from the page, be set as a clickable element and have some additional custom classes of choice.

Definition

{% tag(content, options = {}) %}

Input parameters

content

string represents the inner text content of the tag.

options (optional)

object represents an object of tag configuration options

Option key Type Default Required Description
options.clickable boolean false no If set to true the tag will be set as clickable and receive the tag_interactive styling class
options.removable boolean false no If set to true an additional button that allows to remove the tag will be displayed and the tag itself will receive the tag_interactive styling class
options.secondary boolean false no If set to true the tag will get an additional tag_secondary styling class
options.classNames string "" no List of classes that will be added to the tag element

Example

In this example we render a basic tag.

{% from "@macros/tag.twig" import tag %}

{{ tag('My tag') }}

Example

In this example we render a clickable tag styled as a secondary one.

{% from "@macros/tag.twig" import tag %}

{{ tag('My tag', {
    clickable: true,
    secondary: true
}) }}

Example

In this example we render a removable tag with an additional class making it visible only on mobile devices.

{% from "@macros/tag.twig" import tag %}

{{ tag('My tag', {
    removable: true,
    classNames: 'visible-xs-only'
}) }}

Macro source code

{% macro tag(content, options = {}) %}
    {% from "@macros/icon.twig" import icon %}

    {% set interactive = options.clickable or options.removable ? "tag_interactive" : "" %}
    {% set secondary = options.secondary ? "tag_secondary" : "" %}

    <h-tag
        class="tag {{ interactive }} {{ secondary }} {{ options.classNames|join(' ') }}"
        {% if options.clickable %} clickable {% endif %}
    >
        {{ content }}

        {% if options.removable %}
            <h-tag-remove-button class="tag__remove-button"></h-tag-remove-button>
        {% endif %}
    </h-tag>
{% endmacro %}

Webcomponents reference