# Button Flat

Level: atom.

## Purpose and use

Use for a flat, secondary or inline action where a filled button would dominate. Semantic warning/success/danger appearances describe the action; use explicit action copy rather than color alone.

## Anatomy and behavior

A native button renders the optional label and left/right icons, both using `iconName`. Loading disables activation and sets busy state. With text only it centers the loader while preserving the label in the DOM; with icons it replaces the left icon first, otherwise the right. Parent code owns the action and progress.

## Accessibility and content

Hidden text and centered loading retain `label` as the accessible name. Use a verb describing the action for icon-only controls. `focused` previews styling only. Native keyboard activation and disabled semantics apply; the fixed native type is `button`.

## Local component contract

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

`WblButtonFlatVariant`: `primary | secondary | warning | success | danger`; `WblButtonFlatSize`: `L | M | S | XS`; `WblButtonFlatWidth`: `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

- `WblButtonFlatComponent` — `wbl-button-flat` (src/app/design-system/primitives/button-flat/button-flat.component.ts).

### Inputs

- `WblButtonFlatComponent.variant = input<WblButtonFlatVariant>('secondary')`
- `WblButtonFlatComponent.size = input<WblButtonFlatSize>('L')`
- `WblButtonFlatComponent.width = input<WblButtonFlatWidth>('hug')`
- `WblButtonFlatComponent.label = input('Button')`
- `WblButtonFlatComponent.showLabel = input(true)`
- `WblButtonFlatComponent.leftIcon = input(false)`
- `WblButtonFlatComponent.rightIcon = input(false)`
- `WblButtonFlatComponent.iconName = input<WblIconName>('cross-M')`
- `WblButtonFlatComponent.focused = input(false)`
- `WblButtonFlatComponent.disabled = input(false)`
- `WblButtonFlatComponent.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-flat/button-flat.component.html` (reviewed in D-025, 2026-09-05).

- Code: `src/app/design-system/primitives/button-flat/button-flat.component.ts`.
- Focused test: `src/app/design-system/primitives/button-flat/button-flat.component.spec.ts`.
- Public export: `export * from './primitives/button-flat/button-flat.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/button-flat.stories.ts` (`Design System/Primitives/wbl-button-flat`).

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

Filter Row reset uses the existing `primary` variant with `disabled=true` when
the screen has no applied filter values. Its disabled primary treatment uses
the owned graphite-300 value `#c4c4d4`, keeps native disabled semantics, and
does not emit activation. This usage adds no Button Flat API or variant.