sp-tag

NPM 1.9.0

View Storybook

Try it on Stackblitz
Overview API

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?

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>

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