# Badge

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](../../../../src/app/design-system/primitives/icon/icon.component.ts) 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';` in `src/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.