Tag

h-tag represents a single tag. We provide an additional component h-tag-remove-button which can be used along h-tag.

Note: h- stands for headless. This is naming convention used for every webcomponent as they must have a two-part name.

Attributes

Attribute name	Type	Description
clickable	boolean	if set to true the tag will be displayed as a clickable element
removable	boolean	if set to true the tag will be displayed as a removable element

DOM events

This webcomponent dispatches the following DOM events:

• click
• remove

Examples

In the following examples we also use tag styles and h-tag-remove-button webcomponent for presentation purposes.

Default

sourceoutput

<h-tag>
    Default tag
</h-tag>

<h-tag class="tag">
    Default tag
</h-tag>

Clickable

sourceoutput

<h-tag clickable>
    Clickable tag
</h-tag>

<h-tag class="tag tag_interactive" clickable>
    Clickable tag
</h-tag>

Removable

sourceoutput

<h-tag removable>
    Removable tag
    <h-tag-remove-button></h-tag-remove-button>
</h-tag>

<h-tag class="tag tag_interactive" removable>
    Removable tag
    <h-tag-remove-button class="tag__remove-button" aria-label="remove tag">
        <h-icon icon-name="icon-x"></h-icon>
    </h-tag-remove-button>
</h-tag>

Webcomponents reference

• h-tag-remove-button
• h-icon