sp-tags

Examples API

Attributes and Properties #

Property Attribute Type Default Description
dir dir 'ltr' | 'rtl' 'ltr'

Slots #

Name Description
default slot Tag elements to manage as a group

CSS Custom Properties #

Name Default
--spectrum-alias-border-radius-regular var(--spectrum-global-dimension-size-50)
--spectrum-alias-focus-ring-size var(--spectrum-global-dimension-static-size-25)
--spectrum-avatar-size-100-opacity-disabled var(--spectrum-global-color-opacity-30)
--spectrum-tag-l-texticon-border-size var(--spectrum-alias-border-size-thin)
--spectrum-tag-l-texticon-focus-ring-size var(--spectrum-alias-focus-ring-size)
--spectrum-tag-l-texticon-height var(--spectrum-global-dimension-size-500)
--spectrum-tag-l-texticon-icon-gap var(--spectrum-global-dimension-size-115)
--spectrum-tag-l-texticon-padding-left var(--spectrum-global-dimension-size-160)
--spectrum-tag-l-texticon-padding-right var(--spectrum-global-dimension-size-185)
--spectrum-tag-l-texticon-text-size var(--spectrum-global-dimension-font-size-200)
--spectrum-tag-m-texticon-border-size var(--spectrum-alias-border-size-thin)
--spectrum-tag-m-texticon-focus-ring-color-key-focus var(--spectrum-alias-focus-ring-color)
--spectrum-tag-m-texticon-focus-ring-size var(--spectrum-alias-focus-ring-size)
--spectrum-tag-m-texticon-height var(--spectrum-global-dimension-size-400)
--spectrum-tag-m-texticon-icon-gap var(--spectrum-global-dimension-size-100)
--spectrum-tag-m-texticon-padding-left undefined
--spectrum-tag-m-texticon-padding-right var(--spectrum-global-dimension-size-150)
--spectrum-tag-m-texticon-text-size var(--spectrum-global-dimension-font-size-100)
--spectrum-tag-s-removable-texticon-border-color-error-down var(--spectrum-semantic-negative-color-down)
--spectrum-tag-s-removable-texticon-border-color-error-hover var(--spectrum-semantic-negative-color-hover)
--spectrum-tag-s-removable-texticon-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-tag-s-removable-texticon-button-fill-background-color-hover var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-hover)
--spectrum-tag-s-removable-texticon-button-fill-background-color-key-focus var(--spectrum-alias-infieldbutton-fill-loudnessLow-background-color-key-focus)
--spectrum-tag-s-removable-texticon-icon-color var(--spectrum-alias-icon-color)
--spectrum-tag-s-removable-texticon-icon-color-disabled var(--spectrum-alias-icon-color-disabled)
--spectrum-tag-s-removable-texticon-icon-color-down var(--spectrum-alias-icon-color-down)
--spectrum-tag-s-removable-texticon-icon-color-error var(--spectrum-semantic-negative-icon-color)
--spectrum-tag-s-removable-texticon-icon-color-error-down var(--spectrum-semantic-negative-icon-color)
--spectrum-tag-s-removable-texticon-icon-color-error-hover var(--spectrum-semantic-negative-icon-color)
--spectrum-tag-s-removable-texticon-icon-color-error-selected var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-removable-texticon-icon-color-hover var(--spectrum-alias-icon-color-hover)
--spectrum-tag-s-removable-texticon-icon-color-key-focus var(--spectrum-alias-icon-color-key-focus)
--spectrum-tag-s-removable-texticon-icon-color-selected var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-removable-texticon-icon-color-selected-hover var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-removable-texticon-icon-color-selected-key-focus var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-removable-texticon-text-color-down var(--spectrum-alias-text-color-down)
--spectrum-tag-s-removable-texticon-text-color-error-down var(--spectrum-semantic-negative-color-down)
--spectrum-tag-s-removable-texticon-text-color-error-hover var(--spectrum-semantic-negative-color-down)
--spectrum-tag-s-removable-texticon-text-color-error-key-focus var(--spectrum-semantic-negative-color-down)
--spectrum-tag-s-removable-texticon-text-color-error-selected var(--spectrum-alias-text-color-overbackground)
--spectrum-tag-s-removable-texticon-text-color-hover var(--spectrum-alias-text-color-hover)
--spectrum-tag-s-removable-texticon-text-color-key-focus var(--spectrum-alias-text-color-hover)
--spectrum-tag-s-removable-texticon-text-color-selected var(--spectrum-alias-text-color-overbackground)
--spectrum-tag-s-removable-texticon-text-color-selected-key-focus var(--spectrum-alias-text-color-overbackground)
--spectrum-tag-s-texticon-background-color var(--spectrum-global-color-gray-75)
--spectrum-tag-s-texticon-background-color-disabled var(--spectrum-alias-background-color-disabled)
--spectrum-tag-s-texticon-background-color-error-selected var(--spectrum-semantic-negative-background-color-default)
--spectrum-tag-s-texticon-background-color-error-selected-hover var(--spectrum-semantic-negative-background-color-hover)
--spectrum-tag-s-texticon-background-color-hover var(--spectrum-global-color-gray-75)
--spectrum-tag-s-texticon-background-color-key-focus var(--spectrum-global-color-gray-75)
--spectrum-tag-s-texticon-background-color-selected var(--spectrum-global-color-gray-700)
--spectrum-tag-s-texticon-background-color-selected-hover var(--spectrum-global-color-gray-800)
--spectrum-tag-s-texticon-border-color var(--spectrum-alias-border-color-darker-default)
--spectrum-tag-s-texticon-border-color-disabled var(--spectrum-alias-border-color-disabled)
--spectrum-tag-s-texticon-border-color-error var(--spectrum-semantic-negative-color-default)
--spectrum-tag-s-texticon-border-color-error-hover var(--spectrum-semantic-negative-color-hover)
--spectrum-tag-s-texticon-border-color-error-selected var(--spectrum-semantic-negative-background-color-default)
--spectrum-tag-s-texticon-border-color-error-selected-hover var(--spectrum-semantic-negative-background-color-hover)
--spectrum-tag-s-texticon-border-color-error-selected-key-focus var(--spectrum-semantic-negative-background-color-key-focus)
--spectrum-tag-s-texticon-border-color-hover var(--spectrum-alias-border-color-darker-hover)
--spectrum-tag-s-texticon-border-color-key-focus var(--spectrum-alias-border-color-key-focus)
--spectrum-tag-s-texticon-border-color-selected var(--spectrum-global-color-gray-700)
--spectrum-tag-s-texticon-border-size var(--spectrum-alias-border-size-thin)
--spectrum-tag-s-texticon-focus-ring-color-key-focus var(--spectrum-alias-focus-ring-color)
--spectrum-tag-s-texticon-focus-ring-color-selected-key-focus var(--spectrum-alias-focus-ring-color)
--spectrum-tag-s-texticon-focus-ring-size var(--spectrum-alias-focus-ring-size)
--spectrum-tag-s-texticon-height var(--spectrum-global-dimension-size-300)
--spectrum-tag-s-texticon-icon-color-disabled var(--spectrum-alias-icon-color-disabled)
--spectrum-tag-s-texticon-icon-color-error var(--spectrum-semantic-negative-icon-color)
--spectrum-tag-s-texticon-icon-color-error-hover var(--spectrum-semantic-negative-icon-color)
--spectrum-tag-s-texticon-icon-color-error-selected-hover var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-texticon-icon-color-selected var(--spectrum-alias-icon-color-overbackground)
--spectrum-tag-s-texticon-icon-gap var(--spectrum-global-dimension-size-85)
--spectrum-tag-s-texticon-padding-left var(--spectrum-global-dimension-size-85)
--spectrum-tag-s-texticon-padding-right var(--spectrum-global-dimension-size-115)
--spectrum-tag-s-texticon-text-color var(--spectrum-alias-label-text-color)
--spectrum-tag-s-texticon-text-color-disabled var(--spectrum-alias-text-color-disabled)
--spectrum-tag-s-texticon-text-color-hover var(--spectrum-alias-text-color-hover)
--spectrum-tag-s-texticon-text-color-key-focus var(--spectrum-alias-text-color-hover)
--spectrum-tag-s-texticon-text-color-selected var(--spectrum-alias-text-color-overbackground)
--spectrum-tag-s-texticon-text-color-selected-key-focus var(--spectrum-alias-text-color-overbackground)
--spectrum-tag-s-texticon-text-size var(--spectrum-global-dimension-font-size-75)

Description #

sp-tags and sp-tag elements allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/tags

Import the side effectful registration of <sp-tags> or <sp-tag> via:

import '@spectrum-web-components/tags/sp-tags.js';
import '@spectrum-web-components/tags/sp-tag.js';

When looking to leverage the Tags or Tag base classes as a type and/or for extension purposes, do so via:

import {
    Tags,
    Tag
} from '@spectrum-web-components/tags';

Example #

<sp-tags>
<sp-tag>Tag 1</sp-tag>
<sp-tag invalid>Tag 2</sp-tag>
<sp-tag disabled>Tag 3</sp-tag>
</sp-tags>
<sp-tags>
<sp-tag>
Tag 1
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
<sp-tag invalid>
Tag 2
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
<sp-tag disabled>
Tag 3
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
</sp-tags>
<sp-tags>
<sp-tag>
Tag 1
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
<sp-tag invalid>
Tag 2
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
<sp-tag disabled>
Tag 3
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
</sp-tags>

Deletable #

Use the deletable attribute to signify sp-tags elements that can be removed. The tags will only be focusable when they have the deletable attribute.

<sp-tags>
<sp-tag deletable>Tag 1</sp-tag>
<sp-tag invalid deletable>Tag 2</sp-tag>
<sp-tag disabled deletable>Tag 3</sp-tag>
</sp-tags>
<sp-tags>
<sp-tag deletable>
Tag 1
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
<sp-tag invalid deletable>
Tag 2
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
<sp-tag disabled deletable>
Tag 3
<sp-avatar
slot="avatar"
label="Tag 1"
src=https://place.dog/500/500
>
</sp-avatar>
</sp-tag>
</sp-tags>
<sp-tags>
<sp-tag deletable>
Tag 1
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
<sp-tag invalid deletable>
Tag 2
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
<sp-tag disabled deletable>
Tag 3
<sp-icon-magnify slot="icon" size="s"></sp-icon-magnify>
</sp-tag>
</sp-tags>