Tag

A static label: a technology, a deliverable.

import { Tag } from '@zitdevs/ui';

Examples

ReactTypeScriptRisk summary

AstroRoadmap

<Tag label="React" />
<Tag variant="outline" label="Risk summary" />
<Tag surface="dark" label="Astro" />

Props

Prop	Type	Default	Notes
label	string	required	The text, and all of it.
variant	'default' | 'outline'	'default'	outline leads with a marker, for named deliverables.
surface	Surface	'light'	dark on the inverse or the primary band.
ref	Ref<HTMLSpanElement>	—	The <span>.
className	string	—	Placement; it merges last, so a conflicting class wins.
anything else	<span> attributes	—

Exported type: TagProps.

Label look-alikes

You need to…	Use
Name a technology or a deliverable	Tag
Say what kind of resource something is	TypeTag
Report the health or state of something	StatusTag
Let the reader switch something on or off (a filter)	ToggleChip

Accessibility

• A <span> of text, not a control: no role, no focus, nothing to press. It is drawn with a square frame and no hover so it never looks like one either.
• The outline variant’s marker is hidden; the label is the whole of what is read.

Without JavaScript

It needs none: a <span>, rendered as a Server Component.

Theming

Default: border-default, surface-raised and ink on a light field; on-inverse-quiet at 22% (frame), 6% (fill) and full (text) on a dark one. Outline: primary-line and ink, or primary-inverse at 45% and on-inverse-quiet; its marker is primary or primaryInverse.