Button — Figma Assembly Rules

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.