QsTag

<qs-tag>alpha

A small static label that classifies content: a status, a category, a version. Purely visual: it renders a plain <span>, is not focusable and has no role, so screen readers read its text in line with the content around it. For something clickable, use a link or a button.

Examples

Draftv2.0NewIn review

<qs-tag>Draft</qs-tag>
<qs-tag variant="strong">v2.0</qs-tag>
<qs-tag variant="accent">New</qs-tag>
<qs-tag><qs-icon name="clock"></qs-icon>In review</qs-tag>

Prop

Prop	Type	Default	Description
variant	"neutral" | "strong" | "accent"	"neutral"	Category. `neutral` is outlined, `strong` is a solid inverse fill, `accent` uses the accent ink. Unknown values fall back to `neutral`.
text	string	—	The text content of the element, captured from light DOM before the first render.

Usage

Use a tag to classify or label content at a glance: a status, a category, a version, a count. It is purely visual: no hover, no focus, no click. If people need to act on it (filter, remove, open), use a link or a button instead.

Categories

Variant	Look	Use it for
neutral (default)	outlined ink	most labels: categories, metadata
strong	solid inverse fill	the one label that must stand out: a version, a primary status
accent	accent ink and border	something new or needing attention

The three differ by fill and border, not only by colour, so they stay distinct in both themes and in greyscale.

Release notes v2.0 add the link and input components New.

Do and don't

• Do keep the text to one or two words; tags never wrap.
• Do put the meaning in the words: "Overdue", not just an accent tag.
• Don't use one strong or accent tag per item in a long list; if everything stands out, nothing does.
• Don't make a tag look clickable or add a click handler to it.

In a framework

Children are the static content of the first render, and their markup (links, <em>, lang spans) is kept. For text that changes, bind Elena's text property instead of rendering a child, as Elena recommends:

<!-- React -->  <qs-tag text={label} />
<!-- Vue -->    <qs-tag :text="label" />
<!-- Angular --><qs-tag [text]="label" />

Don't let a framework add or remove individual children inside qs-tag: once rendered, they live inside the component's own element.

Accessibility

• Renders a plain <span> with no role: screen readers read the text in line, nothing is focusable, and keyboard users never land on it.
• The category is in the text, never in the colour alone (WCAG 1.4.1).
• Text passes 4.5:1 in every variant and theme; icons inside are decorative (aria-hidden).
• No motion.