- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Tag
Component status | Contribution |
---|---|
Current version | @spectrum-css/tag@9.1.3 |
Released | September 13, 2024 |
S2-foundations | @spectrum-css/tag@10.0.0-s2-foundations.15 |
Released | October 4, 2024 |
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
StandardContribution
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
Emphasized
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" 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>
SizingContribution
S (default)
Tag label
Tag label
Tag label
M
Tag label
Tag label
Tag label
L
Tag label
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">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>
RemovableContribution
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 nowspectrum-Tag-itemLabel
spectrum-Tags-itemIcon
is nowspectrum-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.