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:431209and representative variant29895:182816passed Figma checks. - Badge UX spec records the verified pill anatomy and size dimensions.
Required Assembly
- Dependency classification:
component.iconis 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) andAppearancethrough its variants. - Choose a semantic appearance:
Default,Red,Orange,Green,Success,Info,Warning,Error, orClear. Category hues are available as filledSky,River,Mint,Lavender,Raspberryand their light<Hue> secvariants (verified A-007, 2026-09-30). TreatDisabledas 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
2pxinternal gap. - The published sizes are fixed-height visual variants:
32,24,20, and16pxforL,M,S, andXSrespectively. 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.