Toast

A short message that comes and goes — with the time it has left drawn and paused under the pointer, an undo that waits before an action is final, a long task updated in place, and repeats folded into one toast that counts.

Web + MobileStableRetours

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.

Quand l’utiliser

To confirm the result of an action: saved, sent, payment received.
For an event the user did not trigger but should know: a new follower, a live auction.
With an action (“Retry”, “Undo”) when there is one obvious next step.

Quand ne pas l’utiliser

For a message that must stay until the situation changes.À la place : Alert
When the user must answer.À la place : Dialog
To report a form's errors: show them next to the fields.À la place : Field

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { toast, Toaster, undoToast, progressToast, groupedToast } from "@krizaka/ui/toast";

Exemples

Undo before it is final

undoToast: archived now, final when the hairline runs out — paused while you hover it.

A task in the background

progressToast: one toast updated in place, the glyph and a bar growing, a success at 100 %.

Repeats fold

groupedToast: five messages become one toast that counts “5 new messages”.

Tones

Default, success, warning and error with an action.

Custom

toast.custom: your JSX in the platform's shell.

Props

Mount once, in the root layout. Then call toast(), toast.success/warning/error/info, toast.custom(…), and the helpers below.

Prop	Type	Défaut	Description
`closeLabel`requis	`string`	—	The accessible name of each toast's close button — passed translated.
`label`requis	`string`	—	The accessible name of the notifications region (sonner's `containerAriaLabel`) — passed translated.
`toastOptions`	`Omit<ToastOptions, "unstyled" \| "closeButtonAriaLabel">`	—	Extra options for every toast (duration, a className); the class names are merged with the platform's.

Accessibilité

The region is a landmark named by label; toasts are announced politely.
Toasts pause while hovered or focused.

Clavier

Touches	Action
`F8`	Moves the focus to the toasts region (sonner's hotkey).
`Tab / Enter`	Reach and press a toast's action or close button.

Bonnes pratiques

Mount one Toaster in the root layout, with its label and closeLabel translated.
A title in a few words, a description only if it adds something.
Never put the only way to do something in a toast: it goes away.
For what can be undone, act now and commit later: undoToast with onUndo and onCommit — no confirmation dialog.
A background task: one progressToast updated with the same id, never a new toast per step.
Events that repeat (messages, retries): groupedToast with a countLabel — one toast that counts, not a pile.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub