Tags - Components

Link tag

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

Try it yourself on the playground

Playground

Removable tag

Fullscreen

<button type="button" aria-label="Dismiss" class="ecl-tag ecl-tag--removable" aria-label="Dismiss">Removable tag<span
    class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="true">
      <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.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.0-beta-1/example" class="ecl-tag">Link tag</a><button
    type="button" aria-label="Dismiss" class="ecl-tag ecl-tag--removable" aria-label="Dismiss">Removable tag<span
      class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="true">
        <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close-outline"></use>
      </svg></span></button><button type="button" aria-label="Dismiss" class="ecl-tag ecl-tag--removable"
    aria-label="Dismiss">Removable tag<span class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close"
        focusable="false" aria-hidden="true">
        <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close-outline"></use>
      </svg></span></button><button type="button" aria-label="Dismiss" class="ecl-tag ecl-tag--removable"
    aria-label="Dismiss">Removable tag<span class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close"
        focusable="false" aria-hidden="true">
        <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close-outline"></use>
      </svg></span></button><a href="/component-library/v4.0.0-beta-1/example" class="ecl-tag">Link tag</a><button
    type="button" aria-label="Dismiss" class="ecl-tag ecl-tag--removable" aria-label="Dismiss">Removable tag<span
      class="ecl-tag__icon"><svg class="ecl-icon ecl-icon--xs ecl-tag__icon-close" focusable="false" aria-hidden="true">
        <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close-outline"></use>
      </svg></span></button><a href="/component-library/v4.0.0-beta-1/example" class="ecl-tag">Link tag</a></div>

Try it yourself on the playground

Playground