/// Data Display

Tag

A static, as-typed metadata label in muted mono — optionally bordered or copy-on-click.

import { Tag } from "@protocore/pds";

View as Markdown

Basics

A Tag renders its children verbatim in muted mono — no case transform. That's what makes it right for machine metadata: regions, tiers, versions, keys.

region:eu-central-1tier:standardv2.14.0internal

Bordered

By default a Tag is borderless and quiet. Add bordered for a faint 1px outline when tags sit on a busy surface or need to read as discrete chips in a dense row.

plaincomputeledger

borderedcomputeledger

Copy on click

Set copyValue and the Tag becomes a copy target: clicking (or pressing Enter/Space when focused) writes the value to the clipboard and briefly shows a "Copied" state. Perfect for transaction ids, hashes, and account keys.

txn_9f2c1a7e40b30x8f3a…c21bacct_eu_00417

Tag vs Badge vs Chip

The system separates these by case and type family (see the table in CONVENTIONS §3):

Tag — *metadata*, rendered as typed in muted mono. It's a value or a key: region:eu-central-1, v2.14.0, a commit sha. Static, or copy-on-click. It never carries a status hue.
Badge — *status*. Sentence-case sans on a tone tint. Use it for a row's state (Settled, Failed), not for a label.
Chip — *an interactive filter*. Mono UPPERCASE that toggles selected. If clicking it filters the view, it's a Chip, not a Tag.

If you're tempted to give a Tag a tone, you probably want a Badge. If you're tempted to make a Tag toggle a filter, you want a Chip.

In the family

Tag alongside its siblings. The mono, as-typed casing is the tell: Tag is inert metadata, distinct from the sentence-case status Badge and the UPPERCASE interactive Chip and Button.

Badge: Settled
Tag: region:eu-central-1
Chip
Button

Usage

Use Tags for machine metadata — keys, ids, regions, versions — rendered exactly as they appear on the wire.
Reach for `copyValue` on anything an operator would paste into a terminal or ticket.
Keep tags borderless in quiet contexts; add `bordered` only when they need more separation.
Prefer a CodeRef when the value is a long identifier that benefits from middle-truncation.

Don't

Don't give a Tag a status colour — that's a Badge's job.
Don't use a Tag as a filter control — a non-copy Tag is inert; use Chip.
Don't uppercase or title-case tag text; the whole point is as-typed fidelity.
Don't cram a full sentence into a Tag — it's a label, not prose.

Accessibility

Keys	Action
`Tab`	Moves focus to a copyable Tag (one with `copyValue`). Plain tags are not focusable.
`Enter / Space`	Copies the value to the clipboard and announces "Copied" via an aria-live region.

A plain Tag is a non-interactive `<span>` — screen readers read its text and move on.
A copyable Tag exposes `role="button"` with an `aria-label` of "Copy <value>", so its purpose is announced even though the visible text is the value itself.
The transient "Copied" confirmation is placed in an `aria-live="polite"` region so assistive tech hears the result of the copy.

Mobile (React Native)

Preview. @protocore/pds-mobile ships the React Native sibling of Tag. It mirrors the web API where React Native allows; the package is a preview with no device-level QA yet, so pin it and expect small changes.

Import it from the mobile package (not @protocore/pds), inside a <PdsProvider> — there is no stylesheet, so style (a ViewStyle) replaces className and every value comes from the theme:

import { Tag } from "@protocore/pds-mobile";

Parity with web. A static metadata label — mono, as-typed, muted, optional border.

React Native has no navigator.clipboard: a copyable tag takes copyValue and calls onCopy(value) so you perform the write (e.g. RN/Expo Clipboard). Web copies directly.
Pressing a copyable tag briefly shows a "copied" skin.

<Tag bordered copyValue="prod-eu-1" onCopy={(v) => Clipboard.setString(v)}>
  prod-eu-1
</Tag>

`Tag` props

Prop	Type	Default	Description
`bordered`	`boolean`	`false`	Draw a 1px faint border around the tag.
`className`	`string`	—
`copyValue`	`string`	—	When set, the tag becomes a button that copies this value to the clipboard and briefly shows a "Copied" state.
`style`	`CSSProperties`	—