Toast

Level: organism.

Purpose and use

Announce an operation result with optional follow-up actions and diagnostic text. Use Alert for persistent context beside a field and Modal for a blocking decision.

Anatomy, behavior, and accessibility

A semantic Toast Setting Icon leads optional title/subtitle, error-copy text, one or two action buttons and close. The second action requires actions=true.
Warning/danger use role=alert; info/success use role=status. The icon is decorative, so the text must explain the outcome without relying on color.
Actions emit immediately without removing the toast. Close starts an internal exit state and emits dismiss only after the matching exit animation ends. Error-copy emits errorCopyClick and immediately changes its icon to a check for two seconds; repeated activation restarts the feedback timer.
Buttons are native and named; error-copy includes the diagnostic text in its accessible name. Keep titles concise and action labels specific. Avoid putting secrets or unnecessary personal information into diagnostic copy.

Open Questions

Copy feedback does not write to the clipboard or confirm success. The parent must handle errorCopyClick. There is no auto-dismiss timer, toast queue, stacking manager or loading/disabled action state in this component.

Local component contract

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

WblToastComponent — wbl-toast (src/app/design-system/patterns/toast/toast.component.ts).

Inputs

WblToastComponent.type = input<WblToastSettingIconType>('info')
WblToastComponent.title = input(true)
WblToastComponent.titleText = input('Title')
WblToastComponent.subtitle = input(true)
WblToastComponent.subtitleText = input('Subtitle')
WblToastComponent.errorCopy = input(false)
WblToastComponent.errorCopyText = input('error123 texttexttexttexttexttexttexttexttexttext')
WblToastComponent.actions = input(false)
WblToastComponent.actionLabel = input('Button')
WblToastComponent.action2 = input(true)
WblToastComponent.action2Label = input('Button')
WblToastComponent.close = input(true)

Public types and allowed values

type WblToastSettingIconType = 'info' | 'success' | 'warning' | 'danger';

Models

None.

Outputs

WblToastComponent.dismiss = output<void>()
WblToastComponent.actionClick = output<void>()
WblToastComponent.action2Click = output<void>()
WblToastComponent.errorCopyClick = output<void>()

Slots and projection markers

The exact template has no Angular content-projection slot.

Local evidence

Code: src/app/design-system/patterns/toast/toast.component.ts.
Focused test: src/app/design-system/patterns/toast/toast.component.spec.ts.
Public export: export * from './patterns/toast/toast.component'; in src/app/design-system/index.ts.
Storybook: storybook/stories/toast.stories.ts (Design System/Patterns/wbl-toast). AnimatedDismiss demonstrates the complete retained-exit lifecycle.

Figma status

UI Kit node 3910:389 is the current visual evidence for the 372px Toast geometry, spacing, icon/text hierarchy, actions and close affordance. No published component key is claimed by this runtime contract.

Provenance

The archived source-document copy is historical evidence only. The active resolver is local code/test/export and the exact Storybook story above.

Toast aligns its 372px inline size, geometry, spacing, icon/text hierarchy and close affordance with the UI Kit node above. Its public inputs and outputs are unchanged.

Reusable motion behavior applies to every Toast consumer:

enter: 300ms Fade-in and Slide-right through --duration-slow;
close sets internal isClosing, adds wbl-toast--closing, and runs 200ms Fade-out plus Slide-left through --duration-toast-dismiss;
only an animationend whose animation name ends with wbl-toast-hide completes closing and emits the existing dismiss output;
prefers-reduced-motion reduces both animation durations to 1ms without delaying the semantic status/alert announcement;
motion does not move focus or change the current role=status|alert mapping.

Transport Requests uses this retained-exit lifecycle for delete success and error feedback. Parent state removes the component in response to dismiss.