Components

Tags

Link

When the click on the tag leads to another page.

<a href="/example" class="ecl-tag">Link tag</a>

Try it yourself on the playground

Playground

Removable

When using the removable variant, the tag gets a "Remove" icon. It can be either a button or a link, dependening on your need.

Removable tag
Fullscreen
<span class="ecl-tag ecl-tag--removable">Removable tag<button type="button" aria-label="Dismiss"
    class="ecl-tag__icon"><svg focusable="false" aria-hidden="true" class="ecl-tag__icon-close ecl-icon ecl-icon--xs">
      <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close"></use>
    </svg><svg focusable="false" aria-hidden="true" class="ecl-tag__icon-close-filled ecl-icon ecl-icon--xs">
      <use xlink:href="/dist/media/icons.1dbe9812.svg#ui--close-filled"></use>
    </svg></button></span>

Try it yourself on the playground

Playground