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 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';insrc/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.