Tag

The qds-tag is the static component used for items that needs to be labeled, categorized, or organized using keywords that describe them.

Usage

When to use

Use tag when you want to show system status, result of process, message or indicating the availability.

When not to use

When you need to show count (use badge component instead) or it should be interactive (use tag component instead) Do not use tags as links that direct you to an entirely different page or launch you from a current experience to a separate tab Avoid using tags with multiple functions to prevent confusion and reduce accidental clicks.

Tags vs. Chips

Tags and Chips have similar purposes but chips are interactive and tags are not.

Loading...

Live Editor

<div>
  <qds-tag text="Static"></qds-tag>
  <qds-chip text="Interactive"></qds-chip>
</div>

Anatomy

1. Background (Optional)
2. Icon (Optional)
3. Text

Key properties

Importance

Tags follow the transversal Importance principle through its importance property. Use the standard importance for the majority of Tags.

Loading...

Live Editor

<div class="qds-controls flex-row">
  <qds-tag text="Standard"></qds-tag>
  <qds-tag importance="emphasized" text="Emphasized"></qds-tag>
  <qds-tag importance="subdued" text="Subdued" icon-name="ai-brain"></qds-tag>
</div>

Subdued

The subdued tag may be indispensable for some tables and complex statuses. We recommend use subdued tag only with icon.

Standard

The standard tag with icon should used by default.

Emphasized

The emphasized tag used to draw more attention to message or status.

Color

Tags come in a variety of 5 color choices for standard and emphasized importances and can use optional decorative icons to delineate between multiple categories.

Usability guidelines

• Tag color should be aligned with icon and message within tag title (ex. not allowed using success icon or positive message with red color)
• Colors available: grey, red, blue, orange, red

Loading...

Live Editor

<div class="qds-controls flex-row">
  <qds-tag text="Content" color="orange"></qds-tag>
  <qds-tag text="Content" importance="emphasized" color="red"></qds-tag>
  <qds-tag
    text="Content"
    importance="subdued"
    color="blue"
    icon-name="ai-brain"
  ></qds-tag>
</div>

Icon

• Use the icon-name property to display an icon on the button. Quartz will look into the default icon library unless you specify another library using the icon-library property.

• In Figma, enable the 🅵 icon toggle to see the icon-name property. See the Usage > Icons instructions for more details.

• Use the icon-name property to display an icon on the Tags. We recommend using standard tag with icon first, as the icon adds context, which is critical for accessibility. Use the other options last to maintain consistency across all systems. However, the following options may be indispensable for some tables and complex statuses.

Loading...

Live Editor

<qds-tag icon-name="ai-brain" text="Content"></qds-tag>

Usability guidelines

• Use universally recognized icons that clearly convey their function or meaning. Avoid ambiguous or overly complex icons.
• Use simple and free of unnecessary details icons. This ensures they remain clear and recognizable even at small sizes.

Text

The text property sets the label displayed in the tag:

Loading...

Live Editor

<qds-tag text="label"></qds-tag>

Writing guidelines

• Use positive and active wording for the label to clearly indicate their function.
• Keep Tag labels concise for easy scanning and comprehension.

Usability Guidelines

Do's

1. Use tags if you need a non-interactive status indicator.
2. Do use colors to help distinguish between different tag labels or categories for easier scanning.

Dont's

1. Do not use the same color for every tag if they are supposed to be used as labels or categories.
2. Do not use different sizes, variations (with/without icon, standard/subdued) in one use case.
3. Do not add a second line in the Tag title.

Advanced topics

Layout

Use Tags to show the different status types:

• (System) Status tag. Used to display the system status to identify vulnerabilities, e.g. in an audit log.
• Result. Applied to processes like orders, returns, courses, where the process is expected to conclude and move to an archive.
• Message. Typically used on cards or announcements, representing a category, informational message, or warning.
• Availability. Most commonly used for indicating the availability of a physical or digital product.

Grouping

Follow the transversal control spacing guidelines when working with group of tag components.

Loading...

Live Editor

<div class="qds-controls flex-row">
  <qds-tag text="Content"></qds-tag>
  <qds-tag text="Content"></qds-tag>
  <div class="flex qds-related">
    <qds-tag importance="emphasized" text="Content"></qds-tag>
    <qds-tag importance="emphasized" text="Content"></qds-tag>
  </div>
</div>

Edge Cases

In case very long statuses that may not fit in the card we recommend:

• Be concise and informative;
• Describe the tag title in a few words or under 25 characters when possible;
• Only include long title content in tags when necessary.
  Note! Tag with more then 25 characters in tag title should be truncated. Truncated tag title disclosed in a tooltip on hover by mouse and on focus by keyboard.

In case when tag draw attention from the main action we recommend:

• use different variations of tags to reduce attention to it (ex. hide icon, use subdued importance option etc)

Accessibility

Tag with more then 25 characters in tag title should be truncated. Truncated tag title disclosed in a tooltip on hover by mouse and on focus by keyboard. The truncation should occur at the start, middle, or end of the title, depending on what is most suitable for the specific use case.

Implementation tips

Importing

Note: if you're using the lazy loader to load Quartz components, you can ignore this section.

Import

To import this component from the public jsDeliver CDN using a JavaScript import:

import { defineCustomElementQdsTag } from 'https://cdn.jsdelivr.net/npm/@quartzds/core@next+esm'
defineCustomElementQdsTag()

Bundler

To import this component using a bundler:

import { defineCustomElementQdsTag } from '@quartzds/core'
defineCustomElementQdsTag()

Angular

To import this component as an Angular component:

import { QdsTag } from '@quartzds/core-angular'

React

To import this component as a React component:

import { QdsTag } from '@quartzds/core-react'

Vue

To import this component as a Vue component:

import { QdsTag } from '@quartzds/core-vue'

Component reference

Properties

Attribute / PropertyTypeDescriptionDefault

color

"blue" | "green" | "grey" | "orange" | "red"

The tag's color.

'grey'

icon-description / iconDescription

string | undefined

Provides a text description of the icon for screen readers.

undefined

icon-library / iconLibrary

string

The name of a registered icon library.

'default'

icon-name / iconName

string | undefined

The name of the icon to render.

Available names depend on the icon library being used.

undefined

importance

"emphasized" | "standard" | "subdued" | undefined

The tag's importance.

'standard'

text

string | undefined

The tag's text.

undefined