sp-tag

NPM

0.42.2

Spectrum

View guidelines

Storybook

View Storybook

Try it on

webcomponents.dev
Examples API

Attributes and Properties #

Property Attribute Type Default Description deletable deletable boolean false disabled disabled boolean false readonly readonly boolean false

Slots #

Name Description default slot text content for labeling the tag avatar an avatar element to display within the Tag icon an icon element to display within the Tag

Events #

Name Type Description delete Event

Description #

<sp-tag> elements represent a category to which the content they are a part of belongs. 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-tag> via:

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

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

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

Sizes #

Small 
<sp-tags>
    <sp-tag size="s">Tag 1</sp-tag>
    <sp-tag invalid size="s">Tag 2</sp-tag>
    <sp-tag disabled size="s">Tag 3</sp-tag>
</sp-tags>
 Medium 
<sp-tags>
    <sp-tag size="m">Tag 1</sp-tag>
    <sp-tag invalid size="m">Tag 2</sp-tag>
    <sp-tag disabled size="m">Tag 3</sp-tag>
</sp-tags>
 Large 
<sp-tags>
    <sp-tag size="l">Tag 1</sp-tag>
    <sp-tag invalid size="l">Tag 2</sp-tag>
    <sp-tag disabled size="l">Tag 3</sp-tag>
</sp-tags>

Deletable #

Use the deletable attribute to signify <sp-tag> elements that can be removed. The tags will only be focusable and deletable when they have the deletable and non-disabled attribute. When the clear button within the <sp-tab> is clicked, a delete event will be dispatched.

Default 
<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>
 With Avatars 
<sp-tags>
    <sp-tag deletable>
        Tag 1
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
    <sp-tag invalid deletable>
        Tag 2
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
    <sp-tag disabled deletable>
        Tag 3
        <sp-avatar
            slot="avatar"
            label="Tag 1"
            src=https://picsum.photos/500/500
        ></sp-avatar>
    </sp-tag>
</sp-tags>
 With Icons 
<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>