i

Dismissible tag

Showing state and identity · researched

A tag with a control to remove it, showing a value the person added or applied, such as a filter.

atom · Carbon: DismissibleTag · also called Input chip, Token, Removable tag

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 (with closeIcon / onClose) variant native: no antd 6.6.5
Variants
filled, solid, outlined
Sizes
—
States documented
disabled
Accessibility guidance
no

Index said not shipped; it missed this. Tag shows a close control when closeIcon is set and fires onClose (preventable). It is a prop of Tag, not a separate component.

docs ↗ · code ↗

Carbon

Dismissible tag native: partly @carbon/react 1.117.0
Variants
red, magenta, purple, blue, cyan, teal, green, gray, cool-gray, warm-gray, high-contrast, outline
Sizes
sm, md, lg
States documented
default, hover, focus, active, disabled, loading
Accessibility guidance
yes

DismissibleTag wraps Tag (div) with an inner close button. Variants are the Tag type prop values (colours).

2 corrected on re-read
  • states_documented: ["hover","focus","disabled"] → ["default","hover","focus","active","disabled","loading"] Tag States: dismissible/operational enabled, hover, focus, on click, disabled, skeleton
  • 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"} docs 200 after redirect to https://www.carbondesignsystem.com/building-blocks/core/components/tag/guidelines; code URL 200

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. Tag component is a static status label with colour modifiers; no removable or dismiss control documented.

Material Web

Input chip (<md-input-chip>) native: partly @material/web 2.5.0
Variants
avatar, remove-only
Sizes
—
States documented
disabled
Accessibility guidance
yes

Agree with index. Primary action is a native button in the shadow root (anchor if href; span for remove-only); the trailing remove action is a separate control. Documented modes: Removable, Remove-only. Chip page has one Accessibility section for all chips.

1 corrected on re-read
  • variants: null → ["avatar","remove-only"] chip.md Input chip: avatar attribute and Remove-only section; no Removable section for input chips

docs ↗ · code ↗

Primer

Token subset native: partly @primer/react 38.40.1
Variants
—
Sizes
small, medium, large, xlarge
States documented
—
Accessibility guidance
yes

Primer React. Token renders span, a or button (as prop) with optional onRemove adding a remove button; removable is optional, not the default. IssueLabelToken is a coloured variant of the same, not a separate job. Status ready.

docs ↗ · code ↗

Spectrum

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

Index disagreement: it said not shipped. The rsp Tag page documents isRemovable (a close button), and S2/v3 TagGroup takes onRemove; SWC 1st-gen sp-tag has a deletable attribute (installed at 1.12.4, tags package) and spectrum-css tag 10.2.0 has the same. Tag is a variant of Tag, not a separate component.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): Tag page documents only a static span (usa-tag, usa-tag--big); it mentions tags filtering results but has no remove control or dismiss behaviour. No tag package beyond usa-tag.

Platform facts

Native elementbutton (dismiss control)No HTML element, role or APG pattern for a tag. The remove control is a button; its accessible name comes from content, aria-label or aria-labelledby (APG Button). The tag body itself has no source.
Baseline—
APG patternbutton
ARIA role—
Shipped by5 of 7 systems

Anatomy

  1. label — Plain term; the value shown, e.g. a filter.
  2. dismiss control — APG Button: a button 'enables users to trigger an action', e.g. a delete operation; HTML button.

Keys the APG binds

  • SpaceActivates the button.
  • EnterActivates the button.

The seven states

default Tag displayed.
hover Pointer-only CSS state; not defined by APG or HTML.
focus The dismiss button is focusable (APG Button).
active Pressed state while the pointer or key is down; CSS :active. Not defined by APG.
disabled disabled on the button; APG Button: aria-disabled true when the action is unavailable.
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. 3 of 35 fields changed on the second read — open any “corrected” note to see what it said before.