• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL

Tag

Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/tag@2.0.0-alpha.0
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

A tag.

Variants

Standard
Verified

Default

Tag 1
Avatar Shantanu
Shantanu

Selected

Tag 1
Avatar Shantanu
Shantanu

Invalid

Tag 1
Avatar Shantanu
Shantanu

Disabled

Tag 1
Avatar Shantanu
Shantanu

Selected + Invalid

Tag 1
Avatar Shantanu
Shantanu
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-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
    </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-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
    </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-Tag-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
    </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-Tag-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

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

  </div>
</div>

Sizing
Verified

S (default)

Tag 1
Avatar Shantanu
Shantanu
Tag 1

M

Tag 1
Avatar Shantanu
Shantanu
Tag 1

L

Tag 1
Avatar Shantanu
Shantanu
Tag 1
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-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <span class="spectrum-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeM" tabindex="0">
      <span class="spectrum-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-label">Tag 1</span>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
    </div>

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

    <div class="spectrum-Tag spectrum-Tag--sizeL" tabindex="0">
      <span class="spectrum-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

  </div>
</div>

Deletable
Verified

Default

Tag 1
Avatar Shantanu
Shantanu

Selected

Tag 1
Avatar Shantanu
Shantanu

Invalid

Tag 1
Avatar Shantanu
Shantanu

Disabled

Tag 1
Avatar Shantanu
Shantanu

Selected + Invalid

Tag 1
Avatar Shantanu
Shantanu
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-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-disabled" tabindex="-1">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </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-Tag-label">Tag 1</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <img class="spectrum-Avatar spectrum-Tag-avatar" src="img/example-ava.jpg" alt="Avatar">
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

    <div class="spectrum-Tag spectrum-Tag--sizeS is-selected is-invalid" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Tag-icon" focusable="false" aria-hidden="true" aria-label="Tag">
        <use xlink:href="#spectrum-icon-24-SentimentPositive" />
      </svg>
      <span class="spectrum-Tag-label">Shantanu</span>
      <button class="spectrum-ClearButton spectrum-ClearButton--small spectrum-Tag-clearButton" aria-label="Remove tag 1" tabindex="-1">
        <svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-Cross75" />
        </svg>
      </button>
    </div>

  </div>
</div>

Migration Guide

Change avatar icon size to small

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

No results found

Try another search term.