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 Examples

Basic tags are simple labels embedded within a container using $luci-color-neutral-84 background color when displayed 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.

Do not use numeric values or counts within tags. Use the badge component for instances when counts are necessary.
Do not 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.

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

Tags are 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.