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

Tags

Component status
Contribution
Last releasedOctober 20, 2020
Current version@spectrum-css/tags@3.0.0-beta.5

Usage notes


A list of tags.

Variants


Standard
Verified

Tag 1
Tag 2
Tag 2


Avatar Shantanu
Avatar Shantanu
Avatar Shantanu


Shantanu
Shantanu
Shantanu
Show markup
<div class="spectrum-Tags" role="list" aria-label="list">
  <div class="spectrum-Tags-item" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 1</span>
  </div>
  <div class="spectrum-Tags-item is-invalid" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
  </div>
  <div class="spectrum-Tags-item is-disabled" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-invalid" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
  <div class="spectrum-Tags-item is-disabled" role="listitem">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
  </div>
</div>

<br><br>

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

Deletable
Verified

An editable taglist.

Tag 1
Tag 2
Tag 2


Avatar Shantanu
Avatar Shantanu
Avatar Shantanu


Shantanu
Shantanu
Shantanu
Show markup
<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" tabindex="0" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 1</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 1" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" tabindex="0" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <span class="spectrum-Tags-itemLabel">Tag 2</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 3" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" role="listitem" tabindex="0">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 2" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <img class="spectrum-Avatar" src="img/example-ava.jpg" alt="Avatar">
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag 3" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
</div>

<br><br>

<div class="spectrum-Tags" role="list" aria-label="Tags">
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-invalid" role="listitem" tabindex="0">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1">
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </div>
  <div class="spectrum-Tags-item spectrum-Tags-item--deletable is-disabled" role="listitem">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Tag">
      <use xlink:href="#spectrum-icon-24-SentimentPositive" />
    </svg>
    <span class="spectrum-Tags-itemLabel">Shantanu</span>
    <button class="spectrum-ClearButton spectrum-ClearButton--small" aria-label="Remove tag Shantanu" tabindex="-1" disabled>
      <svg class="spectrum-Icon spectrum-UIIcon-CrossSmall" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CrossSmall" />
      </svg>
    </button>
  </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.