# Button — Figma Assembly Rules
<!-- figma-assembly.v2
{ "schemaVersion":"figma-assembly.v2", "id":"component.button", "level":"atom", "kind":"published", "aliases":["ButtonPrimary","ButtonSecondary","ButtonFlatPrimary","ButtonFlatSecondary","ButtonFlatSuccess","ButtonFlatWarning","ButtonPrimaryDanger","ButtonSecondaryDanger","ButtonFlatDanger","ButtonInverted","IconButton","Button"], "uxSpec":"specs/ux/components/atoms/button.md", "inventoryTarget":"button", "componentKeys":["0c6c44b67388904a1517702f2d7216554dde4d0e","5b5668e5ed01e671d1ba96a854506d9192752b34","47575e84f992c42caf48c2dde58b7cd1eb846070","a3ba5543e409e004de0509a6e881346dac622765","29cc4fdcf7928505a52669839bd8c6ecec7c9462","2facb55095953688b207796c5cebd7ff0a98a531","83fe6b37c5307419a271aef3d6ed3cb3cc94e7e5","4dbd9e2d82c16cbfa276e3d7418e4446ae4e50b3","7887b38880101d71c6660a64d0e944747e1c71f2","61982cf1ef655acfea4d9594c7388d9427af7f15","c0df83d8febc4593994cbb22f5e1e255e10006d6"], "dependencies":[], "optionalDependencies":["component.icon"], "coveredBy":[] }
-->

Status: active Figma assembly contract.

## Scope

Use this contract when authoring or revising a WB Logistics button instance in
Figma. It governs the component-set choice, exposed properties, visual modes,
and token bindings; it does not define a screen action or runtime API.

## Source Evidence

- Direct Figma evidence: live Figma
  verification of `ButtonPrimary` `14738:46418` and the `New Buttons` section
  completed on 2026-07-24.
- The map records all named button component sets, their `Size`, `Icon`, text,
  icon-swap, focus, and Button State evidence.

## Required Assembly

- Dependency classification: `component.icon` is optional because `Icon=Text`
  is a complete published Button variant; classify Icon as Used only for a
  visible left/right/only icon.
- Rule ID: `button.published-set` — choose one of the mapped published button
  sets and configure its properties; never draw or detach a lookalike.
- Start with the library component set matching the intended appearance:
  `ButtonPrimary`, `ButtonSecondary`, `ButtonFlatPrimary`,
  `ButtonFlatSecondary`, `ButtonFlatSuccess`, `ButtonFlatWarning`,
  `ButtonPrimaryDanger`, `ButtonSecondaryDanger`, `ButtonFlatDanger`, or
  `ButtonInverted`. Do not redraw a lookalike from rectangles and text.
- Set appearance by choosing that component set. Do not add a local
  `Appearance` property to an instance.
- Set the visible label through `Text`; choose `Size` (`L`, `M`, `S`, or `XS`)
  and `Icon` (`Both`, `Left`, `Right`, `Text`, or `Only`) through the existing
  component properties.
- Replace `Left Icon` and `Right Icon` only through their instance-swap
  properties. Leave an unused icon slot absent rather than hiding a detached
  icon layer.
- Use the separate `IconButton` set only when the design calls for that set;
  its sizes are `L M`, `S`, and `XS`, and its visual state is a component
  variant.

## States And Tokens

- Set Default, Hover, Pressed, Disabled, or Loading through the `Button State`
  variable-collection mode. Do not duplicate a button to freeze a visual state.
- `Focused` is a Button property, separate from the Button State modes.
- Preserve the library bindings for background, text, icon, and loader-opacity
  variables. Do not replace them with raw fills to simulate an appearance or
  state.

## Verification Checklist

- `button.published-set`: the exact owner key is one of the keys in this
  contract and matches the intended appearance.
- The selected named component set represents the desired appearance.
- Label, size, icon presence, and icon swaps are set through instance
  properties.
- The intended Button State mode is selected without detached replacement
  layers.
- No screen-specific action copy, permissions, or click behavior has been
  encoded in the component contract.

## Maintenance

Update this file only after a verified Button library change. Keep individual
screen choices in that screen's Figma target and UX specification.