Tag

<zeno-tag>Data displaySource

A small label for a category or status.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Variants

The default tag has no background colour today. See the known gaps.

Default Primary Secondary Accent Paid Due soon Overdue Draft

<zeno-tag variant="default">Default</zeno-tag>
<zeno-tag variant="primary">Primary</zeno-tag>
<zeno-tag variant="secondary">Secondary</zeno-tag>
<zeno-tag variant="accent">Accent</zeno-tag>
<zeno-tag variant="success">Paid</zeno-tag>
<zeno-tag variant="warning">Due soon</zeno-tag>
<zeno-tag variant="danger">Overdue</zeno-tag>
<zeno-tag variant="info">Draft</zeno-tag>

Solid, bordered and dot

solid uses the full colour as the background. bordered adds a border. dot adds a small dot before the text.

Paid Overdue Draft Due soon Online

<zeno-tag variant="success" solid>Paid</zeno-tag>
<zeno-tag variant="danger" solid>Overdue</zeno-tag>
<zeno-tag variant="info" bordered>Draft</zeno-tag>
<zeno-tag variant="warning" bordered>Due soon</zeno-tag>
<zeno-tag variant="success" dot>Online</zeno-tag>

Sizes and shapes

Extra small Small Medium Large Rounded Square

<zeno-tag variant="info" size="xs">Extra small</zeno-tag>
<zeno-tag variant="info" size="sm">Small</zeno-tag>
<zeno-tag variant="info" size="md">Medium</zeno-tag>
<zeno-tag variant="info" size="lg">Large</zeno-tag>
<zeno-tag variant="info" shape="rounded">Rounded</zeno-tag>
<zeno-tag variant="info" shape="square">Square</zeno-tag>

Closable

A closable tag shows a remove button. The button sends a close event. The tag does not remove itself, so this example removes it in the listener.

report.pdf notes.txt budget.csv

<zeno-tag closable variant="info">report.pdf</zeno-tag>
<zeno-tag closable variant="info">notes.txt</zeno-tag>
<zeno-tag closable variant="info">budget.csv</zeno-tag>

document.querySelectorAll('zeno-tag').forEach(tag => {
  tag.addEventListener('close', () => tag.remove());
});

As a link

With href the tag is rendered as a link.

Billing Security

<zeno-tag href="#billing" variant="primary">Billing</zeno-tag>
<zeno-tag href="#security" variant="primary">Security</zeno-tag>

Attributes and properties

Property	Attribute	Type	Default	Description
variant	variantreflects	'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | 'info'	'default'
solid	solidreflects	boolean	false
bordered	borderedreflects	boolean	false
shape	shapereflects	'default' | 'rounded' | 'square'	'default'
size	sizereflects	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
closable	closablereflects	boolean	false
dot	dot	boolean	false
href	href	string	–
target	target	string	–
rel	rel	string	–
closeLabel	closelabel	string	'Remove tag'
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

Event	Detail	Description
close	–	The close button was pressed.

Slots

Slot	Description
Default	The label.
prefix	An icon before the label.

CSS parts

Part
base
close
dot
label
prefix

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Accessibility

Keyboard

Key	What it does
Tab	Moves focus to the link when the tag has href, and to the remove button when it is closable. A plain tag takes no focus.
Enter	Follows the link when the tag has href.
EnterSpace	On the remove button, sends the close event.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• With href the tag is a native <a>. Without it the tag is a <span> with role="status".
• The remove button is a native <button>. Its name is the closeLabel property, “Remove tag” by default.
• An aria-label on the element is copied to the inner link or <span>.
• The dot is decoration: a <span> with no text.
• With prefers-reduced-motion: reduce the link transitions are turned off.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

16 of the 22 properties, methods, events, slots and parts above have no description in the source

• the property variant
• the property solid
• the property bordered
• the property shape
• the property size
• the property closable
• the property dot
• the property href
• the property target
• the property rel
• the property closeLabel
• the part base
• the part close
• the part dot
• the part label
• the part prefix

Known gaps:

• A tag with the default variant and the default shape gets no variant class, so it has no background colour. With bordered it also loses the default border colour. Setting shape="rounded" or shape="square" brings the background back.
• The prefix slot never renders. The slot is only added when it already has content, and the check for content needs the slot to be there. Content with slot="prefix" stays hidden.
• A tag without href has role="status". This makes every tag a live region, although most tags are static labels.
• A closable tag with href puts the remove button inside the link. A button inside a link is not valid HTML.
• The remove button label is not set with a close-label attribute. The property has no attribute name, so the attribute is closelabel. The same label is used for every tag unless you set it on each one.
• The size type lists xl, but the element has no styles for it. An xl tag looks like md.
• The primary and accent variants use the same colours and look the same.