# Button

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

`WblButtonVariant`: `primary | secondary | secondary-danger | danger | inverted`; `WblButtonSize`: `L | M | S | XS`; `WblButtonWidth`: `hug | fill`. `WblIconName` in [the local Icon source](../../../../src/app/design-system/primitives/icon/icon.component.ts) includes `string`: the type accepts any name and does not check resource existence. Choose an existing inline icon or `/icons/<name>.svg` asset.

### 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.