Toast · sonner
Feedback tranzitoriu, sus-centrat — ceva s-a întâmplat și dispare pe cronometru. Pentru ceva ce trebuie să persiste, Alert. Ghidul: docs/feedback.md.
Ierarhia notificărilor
Un singur principiu: cine ține informația după ce mesajul dispare.
| Treaptă | Cine ține informația | Componenta | |
|---|---|---|---|
| 0 | Tăcere | consecința din interfață — un sold mai mic, un document nou evident în listă, un card care lipsește. Utilizatorul vede rezultatul, deci mesajul n-ar adăuga nimic | nimic |
| 1 | Chitanță | interfața ține informația, dar operațiunea a avut miză mai mare — ștergerea unui item se vede în UI și se confirmă și prin toast. Toast temporal, care poartă sens și prin culoare | .toast |
| 2 | Dovadă | mesajul, și numai mesajul — nimic din interfață nu o arată. Ex: sesiunea SPV a expirat, deci documentele nu se mai sincronizează; sau CUI-ul clientului e invalid, deci factura nu poate fi trimisă în e-Factura | .alert (inline sau .page) |
| 3 | Obligație | mesajul, și cere muncă | .alert.page + .alert-actions, fără dismiss |
| 4 | Decizie | mesajul, și nimic nu merge înainte | .modal |
Treptele urcă, nu coboară — un eșec nu devine chitanță pentru că e mic.
success — acolo feedbackul e starea vizibilă, nu un mesaj.Work in progress — maparea aplicațiilor reale. Ierarhia e definită, dar nu e încă verificată pe inventarul complet de notificări din aplicațiile noastre. Urmează un task de inventariere: fiecare tip de notificare existent, mapat pe una din cele cinci trepte. Ce se schimbă după inventar se schimbă aici întâi.
Markup canonic · components/toast.json
Cinci stări
Butoanele trimit toastul în stiva reală a paginii — poziția, umbra, intrarea, cronometrul și maximul de 3 simultan vin din bono-ds.css, nu din pagina asta. error nu se auto-închide: rămâne până îl închizi.
Aceleași cinci stări, cu același sens, ca pe .alert. .warn și .info rămân ca aliasuri deprecate pentru .warning și .neutral.
Acțiunea — una, și numai opțională
O acțiune, maximum, și numai OPȚIONALĂ — adică „nu fac nimic" trebuie să fie un rezultat corect și sigur. undo ✅ cronometrul E fereastra de undo „Vezi documentul" ✅ navigare opțională „Copiază link" ✅ comoditate „Reautorizează" ❌ obligatoriu → .alert „Confirmă suma" ❌ cere un răspuns → .modal Regula e a lui Carbon: acțiunea dintr-o notificare trebuie să fie opțională și să nu blocheze sarcina curentă.
Două corolare
1 · Un toast nu poate fi singurul loc în care există o informație.
„D112 depusă · referință 2026-04-22-7841" — dacă referința stă pe înregistrarea depunerii, toastul e o chitanță și e corect. Dacă stă doar în toast, ai pus o dovadă într-o suprafață de chitanță, iar utilizatorul are patru secunde să noteze un număr de care poate avea nevoie într-o contestație la ANAF.
Dacă utilizatorul ar putea vrea să-l noteze, nu e toast. Remediul: pune datele în interfață, și atunci toastul devine corect — sau nu folosi toast, iar un .alert.success inline pe depunere ține referința cât e nevoie.
2 · Acțiunea opțională e o punte spre locul unde interfața ține informația.
De asta acțiunea din toast e permisă doar opțională: „Vezi documentul" e o scurtătură spre un loc care va exista și peste zece minute. Undo e excepția care confirmă regula — singurul caz în care toastul ține ceva ce interfața încă nu ține, și exact de asta e singura acțiune cu termen.
.alert.Poziționare și durată
.toast-stack SUS-CENTRAT, top 24px, stivuit în jos, gap 10px lățime min(560px, 100vw - 32px) sub 1024px se întinde la left/right 16px, top 16px umbră --sh-toast — nu --sh-popover, nu hardcodată durată 4s implicit · 6s dacă are acțiune · error NU se auto-închide maxim 3 simultan — peste 3 e un log, iar logul stă în pagină Sus-centrat pentru că acolo se uită deja utilizatorul după ce a apăsat ceva, și pentru că nu acoperă CTA-ul de jos pe mobil. .toast-stack.top-center e alias no-op DEPRECAT (v8) — poziția e implicită.
Anunțare — stiva e live region, nu toastul
.toast-stack aria-live="polite" aria-atomic="false" .toast.error + role="alert" Stiva există în DOM la încărcare, deci orice se adaugă în ea se anunță. E mai robust decât să te bazezi pe suportul pentru un nod injectat cu role. aria-atomic="false" ca stiva să anunțe doar toastul nou, nu întreaga listă. error e singura excepție: merită să întrerupă — și nici nu se auto-închide, deci nu dispare de sub cititorul de ecran. butonul de închidere aria-label — e icon-only .ic aria-hidden="true" — decorativ, 16px din CSS
Anatomie
.toast-stack > .toast > .ic + .toast-body + .btn.ghost.xs.icon-only
.ic 16px, dat de CSS — nu din atributele SVG
.toast-body obligatoriu: poartă min-width: 0
.toast-actions în .toast-body, sub text. Una, opțională
butonul de NU o clasă proprie — e butonul din DS:
închidere .btn.ghost.xs.icon-only. .toast-close și butonul de închidere
sunt aliasuri DEPRECATE (2026-09-01)
Perechea de culoare
--c-error pe --c-error-bg dă 4.38:1, sub AA. Exact defectul pe care wrapperul sonner din bono-skills-website îl moștenea, fiindcă își lega variabilele de tokenii de fill.Bordura e tokenul
-text al familiei — aceeași pereche de culoare, plus o margine, pentru că tintul singur e la 1.05–1.12:1 față de pagină. Bordura e la 70% opacitate, aceeași pe toate stările — media opacităților care duc fiecare stare la 3:1, rotunjită în sus. Excepția e .neutral: bordura e --c-fog, nu --c-ink — ink-ul dădea 19:1, o margine de trei ori mai grea decât a celorlalte stări.| Stare | Fundal | Text | Contrast | Bordură (70%) | vs alb / bej-0 |
|---|---|---|---|---|---|
.neutral | --c-bej-1 | --c-ink | 16.23:1 | --c-fog | 2.9 / 2.7:1 |
.success | --c-success-bg | --c-success-text | 5.84:1 | --c-success-text | 3.6 / 3.4:1 |
.warning | --c-warn-bg | --c-warn-text | 4.86:1 | --c-warn-text | 3.2 / 3.1:1 |
.error | --c-error-bg | --c-error-text | 4.91:1 | --c-error-text | 3.6 / 3.4:1 |
.brand | --c-white + marker --c-pink | --c-fog / --c-pink-deep | 4.83:1 | --c-rule + marker | — |