sp-tag

NPM 1.5.0

View Storybook

Try it on webcomponents.dev
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? 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 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

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>
Tag 1 Tag 2 Tag 3
With Avatars With Icons