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

Tag

Component status
Contribution
Current version@spectrum-css/tag@8.1.5
ReleasedMarch 7, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

Variants

Standard
Contribution

Default

Tag label
Tag label
Avatar
Tag label

Selected

Tag label
Tag label
Avatar
Tag label

Invalid

Tag label
Tag label

Disabled

Tag label
Tag label
Avatar
Tag label

Selected + Invalid

Tag label
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-Tag-itemLabel">Tag label</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-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-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
    </div>

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

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled">
      <div class="spectrum-Avatar spectrum-Avatar--size50">
        <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
      </div>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-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-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-emphasized" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-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-Tag-itemLabel">Tag label</span>
      <button type="button" 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
Contribution

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-Tag-itemLabel">Tag label</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
      <button type="button" 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
Contribution

Default

Tag label
Tag label

Selected

Tag label
Tag label

Invalid

Tag label

Disabled

Tag label
Tag label

Selected + Invalid

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-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemLabel">Tag label</span>
      <button type="button" 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-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-18-CheckmarkCircle" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-itemIcon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-Alert" />
      </svg>
      <span class="spectrum-Tag-itemLabel">Tag label</span>
      <button type="button" 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>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

Pluralized classes changed to singular

  • spectrum-Tags-itemLabel is now spectrum-Tag-itemLabel
  • spectrum-Tags-itemIcon is now spectrum-Tag-itemIcon

New emphasized variant has been added

A div wrapper is required for avatar

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

Icon size changed to small

If you use an icon (spectrum-Tag-itemIcon) along with a tag, please replace .spectrum-Icon--sizeXS with .spectrum-Icon--sizeS.

Invalid

Docs updated to show invalid tags always including the alert icon. Invalid tags should have an icon to idenfity itself as invalid and not rely soley on the red background and border color.