Tags - Components

Link tag

<a href="/component-library/v4.0.2/example" class="ecl-tag">Link tag</a>

Try it yourself on the playground

Playground

Removable tag

Fullscreen

<button type="button" class="ecl-tag ecl-tag--removable">Removable tag<span class="ecl-tag__icon"><svg
      class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="false" role="img">
      <title>Dismiss</title>
      <use xlink:href="/component-library/v4.0.2/dist/media/icons.b6764719.svg#close-outline"></use>
    </svg></span></button>

Try it yourself on the playground

Playground

Tag set

Fullscreen

<div class="ecl-tag-set"><a href="/component-library/v4.0.2/example" class="ecl-tag">Link tag</a><button type="button"
    class="ecl-tag ecl-tag--removable">Removable tag<span class="ecl-tag__icon"><svg
        class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="false" role="img">
        <title>Dismiss</title>
        <use xlink:href="/component-library/v4.0.2/dist/media/icons.b6764719.svg#close-outline"></use>
      </svg></span></button><button type="button" class="ecl-tag ecl-tag--removable">Removable tag<span
      class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="false"
        role="img">
        <title>Dismiss</title>
        <use xlink:href="/component-library/v4.0.2/dist/media/icons.b6764719.svg#close-outline"></use>
      </svg></span></button><button type="button" class="ecl-tag ecl-tag--removable">Removable tag<span
      class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="false"
        role="img">
        <title>Dismiss</title>
        <use xlink:href="/component-library/v4.0.2/dist/media/icons.b6764719.svg#close-outline"></use>
      </svg></span></button><a href="/component-library/v4.0.2/example" class="ecl-tag">Link tag</a><button
    type="button" class="ecl-tag ecl-tag--removable">Removable tag<span class="ecl-tag__icon"><svg
        class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="false" role="img">
        <title>Dismiss</title>
        <use xlink:href="/component-library/v4.0.2/dist/media/icons.b6764719.svg#close-outline"></use>
      </svg></span></button><a href="/component-library/v4.0.2/example" class="ecl-tag">Link tag</a></div>

Try it yourself on the playground

Playground