Primitive

Tag

Closeable filter or entity label.

Tags identify entities, filters, and scoped state. Use dismissible tags only when removal is available in the surrounding workflow.
status
DOM renderImage render
TagDefault
AgentsDocsconcrete

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Entity tag with icon.
AgentsDocsconcrete
Render state

Hierarchy

Outline, active, and selected treatments.
OutlineActiveSelectedRunning
Render state

Density

Compact, comfortable, and editorial rhythm.
compactcomfortableeditorial
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
intent'neutral' | 'strong' | 'subtle' | 'sky' | 'terminal' | 'ultra' | 'danger'neutralInline label intent or signal wash.
hierarchy'soft' | 'outline'softTag hierarchy.
density'compact' | 'comfortable' | 'editorial'comfortableTag height and type rhythm.
activebooleanfalsePromotes the tag as currently active.
selectedbooleanfalseShows selected state and default check glyph.
leadingIconIconName | ReactElement-Optional leading glyph.
dismissiblebooleanfalseShows a passive dismiss affordance.
onDismiss() => void-Interactive dismiss action.
childrenReactNode-Tag label.