Tag

The Tag component displays a small label with an optional icon, an optional key/value split, and an optional removable action. Use it for metadata, categories, and filter chips.

Installation

import { Tag } from "@harnessio/ui/components";

// Basic
<Tag value="Default Tag" />

// Theme and variant
<Tag value="Outline Tag" variant="outline" theme="blue" />

// Split (key / value)
<Tag label="Env" value="Production" variant="secondary" theme="green" />

// With a leading icon
<Tag value="Labelled" icon="label" theme="yellow" />

// Removable (reset action)
<Tag
  value="Removable"
  actionIcon="xmark"
  onActionClick={() => remove()}
  theme="blue"
/>

Anatomy

Tag renders a compact pill built from a root container plus a few optional parts.

The root is a <div> that holds the tag’s value text. Passing an icon adds a small leading icon before the text.
Providing both a label and a value turns the tag into a split tag: the label renders as a key segment on the left (with the icon, if any) and the value renders as a segment on the right.
actionIcon adds a trailing icon-only button. Its click is isolated from the tag’s own onClick, so a removable tag can be dismissed without triggering the tag body.

Best practices

Keep value text short — a tag is for a single label, category, or key/value pair.
Use a split tag (label + value) when the tag represents a key and its value, such as Env: Production.
Pair actionIcon="xmark" with onActionClick when a tag represents a removable selection or filter.
Use theme to group or categorize, and rely on the text rather than color alone to convey meaning.

Don’t

Don’t put an icon and a split label on the same tag expecting both on the right — in split mode the icon sits with the left (label) segment.
Don’t lean on the tag as a primary interactive control; it’s a label, not a button (see Accessibility).

Content

Prefer concise, capitalized labels (e.g. “Production”, “High priority”).
For split tags, keep the label (key) short and predictable across tags.

Accessibility

Labeling

The value text carries the tag’s meaning, so always provide clear text.
The actionIcon renders an icon-only button with no accessible name, so screen-reader users won’t hear what removing it does. Don’t rely on the reset action alone to convey critical intent.

Focus & states

The root is a plain <div>. Even with an onClick, it has no role, is not focusable, and has no keyboard handling — treat click support as a convenience, not a substitute for a real button.
The actionIcon button is a real, focusable button.
disabled dims the tag and disables the action button.

Known limitations

A clickable tag (onClick) is not keyboard-operable and exposes no role; use a Button for genuinely interactive controls.
The reset/action button lacks an aria-label.

Properties

Prop	Required	Default	Type
value	true		string
label	false		string
variant	false	'outline'	'outline' \| 'secondary'
size	false	'md'	'sm' \| 'md'
theme	false	'gray'	'gray' \| 'blue' \| 'brown' \| 'cyan' \| 'green' \| 'forest-green' \| 'indigo' \| 'lime' \| 'mint' \| 'orange' \| 'pink' \| 'purple' \| 'red' \| 'violet' \| 'yellow'
rounded	false	false	boolean
icon	false		IconName
iconProps	false		Omit<IconPropsV2, 'name' \| 'size' \| 'fallback' \| 'ref'>
actionIcon	false		IconName
onActionClick	false		() => void
onClick	false		(event) => void
enableHover	false	false	boolean
disabled	false	false	boolean
labelClassName	false		string
valueClassName	false		string
className	false		string