# Badge — Figma Assembly Rules
<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.badge", "level":"atom", "kind":"published", "aliases":["Badge","wbl-badge","wblBadge"], "uxSpec":"specs/ux/components/atoms/wbl-badge.md", "inventoryTarget":"badge", "componentKeys":["daf74307ccf9b084eefe7a1b9650dfabd0d91623"], "dependencies":[], "optionalDependencies":["component.icon"], "coveredBy":[] }
-->

Status: active Figma assembly contract.

## Scope

Use this contract for the standalone WB Logistics Badge. The table-cell variant
adds cell layout and is governed separately by `table-cell-badge.figma.md`.

## Source Evidence

- Direct Figma evidence: Badge frame
  `29801:431209` and representative variant `29895:182816` passed Figma checks.
- [Badge UX spec](wbl-badge.md) records the verified pill anatomy and size
  dimensions.

## Required Assembly

- Dependency classification: `component.icon` is optional because the Badge
  has valid label-only variants; use it only when icon anatomy is enabled.
- Rule ID: `badge.published` — configure the published Badge through its
  variants and nested content; never recreate a local pill.
- Use the library Badge frame and select `Size` (`L`, `M`, `S`, `XS`) and
  `Appearance` through its variants.
- Choose a semantic appearance: `Default`, `Red`, `Orange`, `Green`, `Success`,
  `Info`, `Warning`, `Error`, or `Clear`. Category hues are available as filled
  `Sky`, `River`, `Mint`, `Lavender`, `Raspberry` and their light `<Hue> sec`
  variants (verified A-007, 2026-09-30). Treat `Disabled` as its own visual
  condition, not as a semantic status color.
- Keep label text inside the Badge. Enable icon and chevron anatomy only through
  the verified component controls; use a shared icon instance rather than a
  redrawn glyph.
- Use `State` (`Default`, `Hover`, `Pressed`) as a design-state preview. Do not
  create independent badge components for those visual states.

## Tokens And Sizing

- Preserve the pill radius, semantic surface/text variables, and the compact
  `2px` internal gap.
- The published sizes are fixed-height visual variants: `32`, `24`, `20`, and
  `16px` for `L`, `M`, `S`, and `XS` respectively. Do not rescale a badge
  manually to make a new size.

## Verification Checklist

- `badge.published`: the exact published Badge owner key is retained.
- The badge uses a library variant, label, and optional icon/chevron controls.
- Appearance communicates the intended semantic state and is token-bound.
- Parent layout, table-cell spacing, dropdown behavior, and screen data are not
  encoded in the badge contract.