Notification variants

Visual catalog from frontend/monorepo. Colors from libs/unit/src/tokens.css.

Що треба показати окремо

Тип Плейсмент Анімація
Toast fixed, bottom-center 120ms slide/fade, стек, pause on hover
Inline banner під header / у формі / у modal без входу (статичний)
Page notifications[] зона під title у PageContent без анімації
Canvas errors червона обводка нод outline, не toast
Hub inbox dropdown у nav окремий компонент
BalanceAlertBanner top bar CSSTransition ~300ms
Field error під полем errored border

1. @monorepo/unit Notification

Primitive. Toast uses only primary (success) and alert (error). Warning, info, secondary — inline only.

Плейсмент
Toast: bottom-center. Inline: під header, у формі, у modal, у PageContent.notifications[]
Анімація
Toast — 120ms slide/fade. Inline — статичний, без входу

primary — toast.success

Saved
Configuration published successfully

alert — toast.error

Failed
Failed to load routing list

warning — inline only

!
Access restricted
You don't have permission to view this section

info — inline only

i
Note
Dynamic descriptors are now managed on Connector account details

secondary — Hub onboarding banner

Acme Ltd
Finish onboarding to start processing payments.

alert + actions — 3DS Cascading (StepCard)

This Connector Account doesn't support 3DS Cascading. Replace the account or remove this step.

2. Toast placement

Fixed bottom-center. react-hot-toast/headless + Notification.

Плейсмент
fixed, bottom-center viewport
Анімація
120ms slide/fade, стек кількох toast, pause on hover
Error
The sum of traffic percentages must be 100%

3. Chargebackhit Hub — BalanceAlertBanner

Top bar alerts with different severity levels.

Плейсмент
top bar, на всю ширину сторінки
Анімація
CSSTransition ~300ms при появі/зникненні
ZeroAlert — Top up to keep receiving alerts
CriticalAlert — Balance is running low
DebtAlert — Account in debt

4. Routing flow — ErrorCodeNode

Not unit Notification. Always code 0.04.

Плейсмент
нода на routing canvas (React Flow)
Анімація
статичний блок, не toast
✋
0.04

Payment processing unavailable

5. Routing canvas — form validation (hasError)

No summary popover in repo. Nodes get red outline from formState.errors.

Плейсмент
червона обводка нод + errored border на полях
Анімація
outline, не toast. Field error — errored border під полем

Group A

%

Group B

%

% Split container

The sum of traffic percentages must be 100%

6. QuestLockedBanner

Full-page lock state in merchant quest onboarding.

Плейсмент
центр сторінки, поверх контенту onboarding
Анімація
статичний, без входу
🔒

This onboarding is being edited in another tab

Continue editing in the other tab or close it to enable editing here.

7. Hub inbox (nav)

Persistent feed, not toast variants.

Плейсмент
dropdown у nav (іконка дзвіночка)
Анімація
окремий компонент, без toast-анімації
New invoice
Invoice #1842 is ready to download
Maintenance
User management will be unavailable 08:30–09:30 UTC