Tag

stable

Uppercase label chip with optional click handler

Data DisplayInteractive/Storybook ↗

import { Tag } from "@nodus/design-system"

agentorchestrationv2.1.0productionclickable

Loading demo…

Props

Prop	Type	Default	Description
`variant`	`"default" \| "outlined"`	"default"	Tag style
`onClick`	`() => void`	—	Click handler — makes tag interactive when provided

variant

Type "default" | "outlined"Default "default"

Tag style

onClick

Type () => voidDefault —

Click handler — makes tag interactive when provided

Renders as a <span>. When onClick is provided, add role="button" and tabIndex={0} so keyboard users can activate it.
Interactive tags should also handle keydown for Enter and Space keys to match button behavior.
Tag text is uppercase via CSS — avoid uppercase abbreviations that may be mispronounced by screen readers.

Metadatadefaultoutlinedsemantic type border surface

MobileTouch Target

Dismissible tags need a 44px tap target on the × button. Use the size='md' variant or apply px-3 py-2 for adequate mobile tap area.

Design Rationale

This component was designed to express:

Colored label for status, trust level, or category

Inline data value with expandable provenance popover

Was this helpful?