Tags

Tags are used to label interface objects and to quickly communicate contextualizing information about those objects.

Tags typically include metadata or other labels describing the content.

Basic Tag

Basic tags are simple labels embedded within a container using $luci-color-neutral-84 background color when used on light backgrounds.

Machine Learning
MongoDB
iSCSI
SAP

Copied to clipboard

<ul class="luci-tag">
    <li class="luci-tag__item"> Machine Learning </li>
    <li class="luci-tag__item"> MongoDB </li>
    <li class="luci-tag__item"> iSCSI </li>
    <li class="luci-tag__item"> SAP </li>
</ul>

Do’s and Don’ts

Use tags to describe and label objects.
Use succinct, highly distinct labels for tags whenever possible.

Use numeric values or counts within tags. Use the badge component for instances when counts are necessary.
Use distinct background colors to convey status or urgency within a tag.

Example in narrow container

Tag items carry a right and bottom margin to ensure equal spacing when stacked and wrapping.

Machine Learning
MongoDB
iSCSI
SAP
MYSQL
Artifical Intelligence
Backup

Dismissable Tags

A close icon is added to the tags when they are dismissible.

Machine Learning
MongoDB
iSCSI
SAP

Copied to clipboard

<ul class="luci-tag">
    <li class="luci-tag__item"> Machine Learning
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
    <li class="luci-tag__item"> MongoDB
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
    <li class="luci-tag__item"> iSCSI
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
    <li class="luci-tag__item"> SAP
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
</ul>

Tag Color

The container default color value is $luci-color-neutral-84.

Tags are not intended to convey status (such as warnings, errors, or alerts). As such, tags should not include warning or error color backgrounds. Additionally, there is not yet a clear need for enabling or providing different background color variations based on content type or category at this time.

If there is an emerging (or existing) need to apply context-sensitive background colors in your product, please make a request and provide sensitizing examples and screenshots.

Tags on Dark Backgrounds

The tags were designed to work on light, white, and dark backgrounds.

Machine Learning
MongoDB
iSCSI
SAP

Copied to clipboard

<ul class="luci-tag">
    <li class="luci-tag__item"> Machine Learning </li>
    <li class="luci-tag__item"> MongoDB </li>
    <li class="luci-tag__item"> iSCSI
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
    <li class="luci-tag__item"> SAP
        <button class="luci-tag__button">
            <svg class="luci-icon luci-icon--size-xs luci-tag__button-icon" aria-hidden="true">
                <use xlink:href="/icons/luci.svg#close"> </use>
            </svg>
        </button>
    </li>
</ul>

Class Reference

Class	Applies to	Outcome
`.luci-tag--is-dismissing`	`.luci-tag`	Transitions to `opacity: 0`. Added via javascript.