Level: atom.
Purpose and use
Show an assigned label or selected value, optionally removable. Use Badge for status and a dedicated selection control when the whole element should toggle.
Anatomy and behavior
A static span contains an optional leading icon, label and native close button. closable exposes that button; clicking it emits closed but does not remove the component. The parent removes the corresponding item. Hiding the label enables the icon-only presentation; there is no disabled or loading state.
Accessibility and content
The close button is named Удалить тег plus tagText; provide meaningful text even when label is hidden. Keyboard activation belongs to the close button, not the whole tag. Do not attach a second conflicting removal action to the outer span.
Local component contract
This is the current owned contract for component.tag. Behavior above was checked
against the local implementation, template and focused tests listed below.
Historical migration evidence does not override these current sources.
Public type values
WblTagSize: L | M | S; WblTagAppearance: default | primary | selected | accent-secondary. label is a visibility boolean; actual content is tagText. closed emits void. WblIconName in the local Icon source includes string: the type accepts any name and does not check resource existence. Choose an existing inline icon or /icons/<name>.svg asset.
Classes and selectors
WblTagComponent—wbl-tag(src/app/design-system/primitives/tag/tag.component.ts).
Inputs
WblTagComponent.size = input<WblTagSize>('L')WblTagComponent.appearance = input<WblTagAppearance>('default'), whereWblTagAppearance = 'default' | 'primary' | 'selected' | 'accent-secondary'WblTagComponent.leftIcon = input(false)WblTagComponent.icon = input<WblIconName>('check')WblTagComponent.label = input(true)WblTagComponent.tagText = input('Tag')WblTagComponent.closable = input(false)WblTagComponent.actionIcon = input<WblIconName | null>(null)(A-005)WblTagComponent.actionLabel = input('')(A-005)
Models
- None.
Outputs
WblTagComponent.closed = output<void>()WblTagComponent.actionClick = output<void>()(A-005)
Slots and projection markers
- The exact template has no Angular content-projection slot.
Selected appearance
selected is the semantic appearance for a selected value represented as a
compact Tag inside wbl-multiselect. It uses
--color-background-dropdown-active for the background, with primary text and
the existing secondary close-icon treatment. It is not a replacement for the
generic default or primary Tag appearances.
This maps the verified 🟢 🚛 Tag visual nested in the Multiselect Tag Figma
set to a local semantic API without changing generic Tag consumers.
Accent-secondary appearance
accent-secondary (A-003) is the lilac counter tag on tender lot cards — «7 ТС»
next to the tender type and «+2» between route points in Figma
jwmCEMZZjn9cieKYqxI6FL (🚛 lot-customer, fill bg/accent-sec). It uses
--color-background-accent-secondary with primary text and the secondary
close-icon treatment. Existing consumers keep their appearance.
Trailing action
A-005: a tag that is not closable may carry a trailing icon action — the
customer documents «Документ 1.pdf ⤓» on the outer-customer tender page, Figma
jwmCEMZZjn9cieKYqxI6FL, node 20303:136205 (the Tag's close slot holds the
download icon). actionIcon names the owned icon; the native button reuses
the close-button geometry, is named by actionLabel (or tagText when blank)
and emits actionClick. closable wins when both are set. The host and the
tag are capped at the container width, so a long label truncates with an
ellipsis instead of widening the parent.
Local evidence
Behavior/template:
src/app/design-system/primitives/tag/tag.component.html(reviewed in D-025, 2026-09-05).Code:
src/app/design-system/primitives/tag/tag.component.ts.Focused test:
src/app/design-system/primitives/tag/tag.component.spec.ts.Public export:
export * from './primitives/tag/tag.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/tag.stories.ts(Design System/Primitives/wbl-tag).
Figma status
The nested Tag evidence is recorded by the Multiselect assembly contract. A standalone Tag assembly sidecar has not yet been authored, so this contract does not claim an independent Figma owner.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.