Alert

Level: molecule.

Purpose and use

Explain a local status, result or problem near the affected content. Use Toast for a transient notification and Modal for a decision that blocks continuation.

Anatomy, behavior, and accessibility

• Optional semantic icon, title, subtitle, one or two flat actions and a close button form the alert. Type fixes both the icon and action color treatment.
• Warning/danger use role="alert"; neutral/info/success use role="status". Icons are decorative; the text must state the outcome without relying on color.
• The second action renders only when the action group and action2 are enabled. Each action passes its own loading value to Button Flat.
• Dismiss and actions emit events. Dismiss does not remove the alert; the parent decides visibility. The native close button is named «Закрыть уведомление».
• Replace default Title/Subtitle/Button copy with the issue and a specific next action. There is no content-projection slot or automatic timeout.

Local component contract

This is the active owned contract for component.alert. The API below is verified against the current local implementation, focused test and story. The Source commit 0112cba0779a2d2a4b6c7a17243201694344d70a remains migration provenance, not the runtime owner.

Classes and selectors

• WblAlertComponent — wbl-alert (src/app/design-system/patterns/alert/alert.component.ts).

Inputs

• WblAlertComponent.type = input<WblAlertType>('neutral')
• WblAlertComponent.size = input<WblAlertSize>('M')
• WblAlertComponent.leftIcon = input(true)
• WblAlertComponent.title = input(true)
• WblAlertComponent.titleText = input('Title')
• WblAlertComponent.subtitle = input(true)
• WblAlertComponent.subtitleText = input('Subtitle')
• WblAlertComponent.closable = input(true)
• WblAlertComponent.action = input(true)
• WblAlertComponent.actionLabel = input('Button')
• WblAlertComponent.actionLoading = input(false)
• WblAlertComponent.action2 = input(false)
• WblAlertComponent.action2Label = input('Button')
• WblAlertComponent.action2Loading = input(false)
• WblAlertComponent.iconName = input<WblIconName | null>(null) — A-003: replaces the type icon (Figma «Мои заявки» 19223:178822: smile-sad on a rejected application, smile-happy on an approved one); null keeps the type icon. Type still sets colors, live role and action variant.
• WblAlertComponent.grouped = input(false) — A-003: the alert heads a bordered group with a card below it; the group owns the corners, so the alert drops its own radius.

Public types and allowed values

type WblAlertType = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
type WblAlertSize = 'M' | 'S';

Models

• None.

Outputs

• WblAlertComponent.dismiss = output<void>()
• WblAlertComponent.actionClick = output<void>()
• WblAlertComponent.action2Click = output<void>()

Slots and projection markers

• The exact template has no Angular content-projection slot.

Local evidence

• Code: src/app/design-system/patterns/alert/alert.component.ts.
• Focused test: src/app/design-system/patterns/alert/alert.component.spec.ts.
• Public export: export * from './patterns/alert/alert.component'; in src/app/design-system/index.ts.
• Storybook: storybook/stories/alert.stories.ts (Design System/Patterns/wbl-alert).

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.