i

Tag

Showing state and identity · researched

A small label that categorises an item or marks its status.

atom · also called Label, Badge, Chip, Lozenge

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Tag native: partly antd 6.6.5
Variants
filled, solid, outlined
Sizes
—
States documented
default, disabled
Accessibility guidance
no

Span (a when href is set); closable tags get role=button on the close control. Tag.CheckableTag is a toggle tag with role=checkbox.

1 corrected on re-read
  • builds_on_native: "no" → "partly" SSR: default span.ant-tag (close = span role=button); renders <a> when href is set; CheckableTag is span role=checkbox

docs ↗ · code ↗

Carbon

Tag native: partly @carbon/react 1.117.0
Variants
Read-only, Dismissible, Selectable, Operational
Sizes
small, medium, large
States documented
default, hover, focus, active, disabled
Accessibility guidance
yes

Source renders a div, or a button when onClick is set or the tag is operational. Docs also list selected and skeleton states. Tag overflow is a separate component.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/tag/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/tag/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Tag"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

Tag native: no govuk-frontend 6.5.1
Variants
blue, grey, green, teal, purple, magenta, red, orange, yellow, inactive
Sizes
—
States documented
default
Accessibility guidance
no

Strong element with colour modifier classes; the installed 6.5.1 mixin lists pink and turquoise colours not listed on the live page, which lists blue and inactive.

docs ↗ · code ↗

Material Web

Chips (assist, filter, input, suggestion) superset native: partly @material/web 2.5.0
Variants
Assist chip, Filter chip, Input chip, Suggestion chip, elevated
Sizes
—
States documented
disabled
Accessibility guidance
yes

Chips cover actions, filters, entered values and suggestions, so they are wider than a label tag; input chip is the closest to a removable tag. Assist, filter and suggestion chips render a native button; chip-set is a custom element with role=toolbar.

docs ↗ · code ↗

Primer

Label native: no @primer/react 38.40.1
Variants
default, primary, secondary, accent, success, attention, severe, danger, done, sponsors
Sizes
small, large
States documented
default
Accessibility guidance
yes

Label is static metadata text (span). Token is the removable/interactive chip (sizes small, medium, large, xlarge; renders span, button or a) and LabelGroup truncates a set of labels; both have Accessibility pages. TopicTag exists in src/ with no docs page.

1 corrected on re-read
  • alias_kind: "contested" → "same" Independent decision; prior was contested

docs ↗ · code ↗

Spectrum

Tag native: no @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L
States documented
default, hover, focus, active, disabled, error
Accessibility guidance
yes

Page 'Tag' plus 'Tag group' (sizes S, M, L from the group page and TagGroup.json; states from the Tag page). Native check: S2 TagGroup is React Aria divs in a grid, and SWC 1st-gen sp-tags and sp-tag are custom elements with role list and listitem.

docs ↗ · code ↗

USWDS

Tag native: no @uswds/uswds 3.14.0
Variants
.usa-tag--big
Sizes
.usa-tag--big
States documented
default
Accessibility guidance
yes

Template is a plain span; docs say to use ARIA live regions when tags flag new content.

1 corrected on re-read
  • builds_on_native: "partly" → "no" Twig renders span.usa-tag; no native element

docs ↗ · code ↗

Platform facts

Native elementnot recordedNo HTML element, ARIA role or APG pattern for a tag/chip. Two spec items touch the word: link type 'tag' (rel=tag on a link; 'the tag that the referenced document represents applies to the current document') and section 4.14.2 'Tag clouds', which says the specification 'does not define any markup specifically for marking up lists of keywords' and shows ul/li/a with a hidden span annotation. Neither defines a UI tag component. Removable or selectable tags would borrow button, listbox or grid patterns; none is claimed to define a tag.
Baseline—
APG patternnone
ARIA role—
Shipped by7 of 7 systems

Anatomy

    The seven states

    default Static label.
    hover Inference, no source: hover is CSS.
    focus n/a — Not defined for a static tag; focusable only if made interactive.
    active n/a — Not defined.
    disabled n/a — Not defined.
    error n/a — Not defined.
    loading n/a — Not defined.

    Every cell was read twice, the second time from raw sources by a separate pass. 4 of 35 fields changed on the second read — open any “corrected” note to see what it said before.