Design

Toast

@/components/ui/Toast

«Angre etter», ikke bare «bekreft før» — invertert kort, `useToast().vis({ tekst, tone?, handling?, varighet?, preserve?, vedLukking? })` inne i en `ToastProvider`.

Når brukes den

  • En reversibel handling som ALLEREDE har skjedd, med en ekte reversering — «Angre» kaller kallestedets motsatte API-kall.

  • `tone` velger fylt farge på HELE kortet: message (default, nøytral) for bekreftelser uten egen alvorlighetsgrad, success/warning/error når det selv sier noe om utfallet.

  • `preserve` for en toast som ikke skal lukkes av seg selv — typisk en pågående, lengre prosess.

  • `vedLukking(angret)` for UTSATT SLETTING: raden fjernes fra lokal state med én gang, men selve slette-kallet sendes først når toasten lukkes UTEN at brukeren angret.

  • Maks tre synlige samtidig, auto-lukk etter 6 sekunder (pauser ved hover/fokus), `role="status"`.

  • Ikke bruk til destruktive handlinger som kaskaderer til annet, eller som sender e-post/penger — bruk `ConfirmDialog` (bekreft FØR) i stedet.

Eksempler

Toner

message er nøytral (default). success/warning/error fyller hele kortet i statusfargen — bruk når toasten selv skal signalisere utfallet.

vis({ tekst: 'Kunne ikke lagre', tone: 'error' })

Med Angre

Handlingen har allerede skjedd — «Angre» reverserer den med et ekte, motsatt kall.

Tilstand: ubetalt

vis({ tekst: 'Markert som betalt', handling: { tekst: 'Angre', onClick: () => reverser() } })

preserve

Lukkes kun manuelt eller via `vedLukking` — for en toast som følger en lengre, pågående prosess.

vis({ tekst: 'Synkroniserer …', tone: 'warning', preserve: true })

Utsatt sletting

Raden skjules med det samme; selve DELETE-kallet sendes først når toasten lukkes uten angring.

Raden finnes

vis({ tekst: 'Slettet · Angre', tone: 'error', handling: { tekst: 'Angre', onClick: gjenopprett }, vedLukking: angret => { if (!angret) slettFraServer() } })

Props

Sveip tabellen for å se hele innholdet

Navn
Type
Default
Beskrivelse
tekst *
string
Meldingsteksten.
tone
'message' | 'success' | 'warning' | 'error'
'message'
Fyllfarge på hele kortet.
handling
{ tekst: string; onClick: () => void | Promise<void> }
Typisk «Angre». Kalles én gang; toasten lukkes etterpå.
varighet
number
6000
Millisekunder før auto-lukk. 0 = lukkes kun manuelt.
preserve
boolean
false
Lukkes ALDRI automatisk. Lesbart alias for `varighet: 0`.
vedLukking
(angret: boolean) => void | Promise<void>
Kalles nøyaktig én gang når toasten forsvinner. `angret` er true kun ved klikk på «Angre».

Regler

regel/angre-etter-framfor-bekreft-for

Beslektede komponenter