Button · WB Design Wiki

Level: atom.

Purpose and use

Trigger a primary, secondary, or destructive action; use Link for navigation. Choose danger for a destructive action, secondary-danger (A-003, Figma ButtonSecondaryDanger 13410:13959: secondary background with a danger icon/label) for a low-emphasis destructive action such as «Покинуть тендер», inverted for an action on an inverted surface, and Button Flat for the flat treatment.

Anatomy and behavior

The native button contains a label and optional left/right icons. Both icons use the same iconName. width='fill' fills the available host width. Loading disables the native button: a text-only button keeps its label in the DOM but visually replaces it with a centered loader; otherwise the left icon, or the right icon when there is no left icon, becomes the loader. The parent owns the action and loading lifecycle.

Accessibility and content

Native button keyboard behavior applies. label supplies the accessible name when the visible label is hidden or during centered loading; keep it meaningful for icon-only actions. Loading adds aria-busy. focused is a visual preview flag, not a request to move browser focus. The button has type='button', so form submission is an integration decision.

Local component contract

This is the current owned contract for component.button. 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

Classes and selectors

WblButtonComponent — wbl-button (src/app/design-system/primitives/button/button.component.ts).

Inputs

WblButtonComponent.variant = input<WblButtonVariant>('primary')
WblButtonComponent.size = input<WblButtonSize>('L')
WblButtonComponent.width = input<WblButtonWidth>('hug')
WblButtonComponent.label = input('Button')
WblButtonComponent.showLabel = input(true)
WblButtonComponent.leftIcon = input(false)
WblButtonComponent.rightIcon = input(false)
WblButtonComponent.iconName = input<WblIconName>('cross-M')
WblButtonComponent.focused = input(false)
WblButtonComponent.disabled = input(false)
WblButtonComponent.loading = 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/button/button.component.html (reviewed in D-025, 2026-09-05).
Code: src/app/design-system/primitives/button/button.component.ts.
Focused test: src/app/design-system/primitives/button/button.component.spec.ts.
Public export: export * from './primitives/button/button.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/button.stories.ts (Design System/Primitives/wbl-button).

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.

M-002 extension

M-002 extended WblButtonVariant to primary | secondary | danger | inverted. The danger variant is reserved for destructive actions, including the visible confirmation action in the Transport Requests deletion modal shown by Figma nodes 17034:12382 and 17034:12383 in file uGBDiLA947AJwkuvpohikQ.

The variant changes visual semantics only. It retains the native button, visible label, disabled state, loading behavior, aria-busy, and the parent's ownership of the action lifecycle. A destructive button must have a specific text label such as «Удалить» and cannot communicate danger through color alone.

The Angular implementation, focused regression test, and Danger Storybook story are current evidence for the danger class/token treatment and the existing disabled and loading behavior.