Level: atom.
Purpose and use
Show a compact status or category. Use an interactive badge only for an actual action or disclosure; use Tag when removable selection is the task.
Anatomy and behavior
The label can have a leading icon and trailing chevron. Either clickable or chevron changes the root from a static span to a native button. appearance='disabled' disables that button. There is no component selection state or menu implementation; the parent supplies the action.
Accessibility and content
Preserve textual meaning alongside status color. When showLabel=false, label supplies an aria-label. Native keyboard activation applies only to the button branch; the static span is not a focus target. A chevron should correspond to a real disclosure in its enclosing composition.
Local component contract
This is the current owned contract for component.badge. 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
WblBadgeSize: L | M | S | XS; WblBadgeAppearance: default | red | orange | green | success | warning | error | clear | disabled | info | sky | sky-secondary | river | river-secondary | mint | mint-secondary | lavender | lavender-secondary | raspberry | raspberry-secondary. 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.
Appearance to Figma mapping (A-007)
Verified against Figma Badge frame 29801:431209 variable bindings on 2026-09-30.
Filled appearances use white text (--color-text-icon-primary-inverted); secondary
(light) appearances use the pressed shade of their hue for text.
| Appearance | Figma Color |
Background default / hover / pressed | Text |
|---|---|---|---|
default |
Default | background-accent / button-primary-background-hover / -pressed |
inverted |
red |
Red | button-danger-background-* |
inverted |
orange |
Orange | button-flat-warning-* |
inverted |
green |
Green | button-flat-success-* |
inverted |
info |
Info | content-background-blackberry[-hover/-pressed] |
button-primary-background-pressed |
error |
Error | content-background-red[-hover/-pressed] |
button-danger-background-pressed |
warning |
Warning | content-background-orange[-hover/-pressed] |
button-flat-warning-pressed |
success |
Success | content-background-green[-hover/-pressed] |
button-flat-success-pressed |
sky, river, mint, lavender, raspberry |
Sky, River, Mint, Lavender, Raspberry | content-<hue>[-hover/-pressed] |
inverted |
<hue>-secondary |
<Hue> sec |
content-background-<hue>[-hover/-pressed] |
content-<hue>-pressed |
clear |
Clear | background-dropdown-active (default) |
text-icon-primary |
disabled |
Disabled | background-dropdown-active, no state change |
text-icon-primary-gray |
Breaking change in A-007: sky now means the filled Figma Sky variant. The former
light «Вы победили» badge (A-003) is sky-secondary; the only consumer, Lot Card
you-won, was migrated.
Open question: Figma Clear Hover and Pressed render darker than Default
(sampled ≈ #ececef / #e4e4e8) but expose only bg/dropdown active as a bound
variable, so no token can be verified. The local hover/pressed values
(background-dropdown-hover / background-dropdown-active) are unchanged pending
a Figma variable decision.
Classes and selectors
WblBadgeComponent—wbl-badge(src/app/design-system/primitives/badge/badge.component.ts).
Inputs
WblBadgeComponent.size = input<WblBadgeSize>('L')WblBadgeComponent.appearance = input<WblBadgeAppearance>('default')WblBadgeComponent.clickable = input(false)WblBadgeComponent.leftIcon = input(false)WblBadgeComponent.iconName = input<WblIconName>('cross-M')WblBadgeComponent.showLabel = input(true)WblBadgeComponent.label = input('Badge')WblBadgeComponent.chevron = input(false)
Models
- None.
Outputs
- None.
Slots and projection markers
- The exact template has no Angular content-projection slot.
Local evidence
Behavior/template:
src/app/design-system/primitives/badge/badge.component.html(reviewed in D-025, 2026-09-05; appearance set and colors updated in A-007, 2026-09-30).Code:
src/app/design-system/primitives/badge/badge.component.ts.Focused test:
src/app/design-system/primitives/badge/badge.component.spec.ts.Public export:
export * from './primitives/badge/badge.component';insrc/app/design-system/index.ts.Storybook:
storybook/stories/badge.stories.ts(Design System/Primitives/wbl-badge).
Figma status
This runtime contract does not infer a Figma owner. Assembly evidence, when verified, is maintained separately through the inventory-linked sidecar.
Provenance
The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.