• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Tag

Component status
Contribution
Last releasedJanuary 27, 2023
Current version@spectrum-css/tag@4.0.8

Usage notes


A tag.

Variants


Standard
Verified

Default

Tag label
Tag label
Avatar
Tag label

Selected

Tag label
Tag label
Avatar
Tag label

Invalid

Tag label
Tag label
Avatar
Tag label

Disabled

Tag label
Tag label
Avatar
Tag label

Selected + Invalid

Tag label
Tag label
Avatar
Tag label

Emphasized

Tag label
Tag label
Avatar
Tag label
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>
    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>


  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>


  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>


  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>


  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Emphasized</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

</div>

Sizing
Verified

S (default)

Tag label
Tag label
Tag label
Avatar
Tag label

M

Tag label
Tag label
Tag label
Avatar
Tag label

L

Tag label
Tag label
Tag label
Avatar
Tag label
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S (default)</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross100" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size100">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeM spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross100" />
          </svg>
        </div>
      </button>
    </div>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeL spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeL spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross200" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <div class="spectrum-Avatar spectrum-Avatar--size200">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeL spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross200" />
          </svg>
        </div>
      </button>
    </div>

  </div>
</div>

Removable
Verified

Default

Tag label
Tag label

Selected

Tag label
Tag label

Invalid

Tag label
Tag label

Disabled

Tag label
Tag label

Selected + Invalid

Tag label
Tag label
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Invalid</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled spectrum-Tag--removable" tabindex="-1">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled spectrum-Tag--removable" tabindex="-1">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Selected + Invalid</h4>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid spectrum-Tag--removable" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tags-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tags-itemLabel">Tag label</span>
      <button type="reset" class="spectrum-ClearButton spectrum-ClearButton--sizeS spectrum-Tag-clearButton" tabindex="-1">
        <div class="spectrum-ClearButton-fill">
          <svg class="spectrum-Icon spectrum-ClearButton-icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
            <use xlink:href="#spectrum-css-icon-Cross75" />
          </svg>
        </div>
      </button>
    </div>

  </div>
</div>

Migration Guide


New emphasized variant has been added

A div wrapper is required for avatar

<div class="spectrum-Avatar spectrum-Avatar--size50 spectrum-Tag-avatar">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>

Change avatar icon size to small

If you use avatar icon along with tag, please replace .spectrum-Icon--sizeXS with .spectrum-Icon--sizeS.