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 + MobileStableFeedback

Web and mobile — the same component for React and React Native. Stable: its API only changes in a major version.

Why it is here. Used by Orochia, Orazaka, krizaka.com.

When to use

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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`closeLabel`required	`string`	—	The accessible name of each toast's close button — passed translated.
`label`required	`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.

Accessibility

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

Keyboard

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

Best practices

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.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub