A short message that comes and goes: toast() from anywhere, one Toaster per app.

Web + MobileStableFeedback

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

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@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

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

Import

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

Examples

Tones

Default, success, warning and error with an action.

"use client";

import { Button } from "@krizaka/ui/button";
import { toast, Toaster } from "@krizaka/ui/toast";
import { useEffect } from "react";

// Each toaster has its own `id`: the toasts of this demo stay in this demo's toaster.
const toasterId = "tones";
const show = () => {
  toast("Draft saved", { toasterId, description: "Autosaved a moment ago." });
  toast.success("Payment received", { toasterId, description: "€12.00 from @maya." });
  toast.warning("Your balance is low", { toasterId, description: "Two tips left before a top-up." });
  toast.error("Upload failed", { toasterId, description: "The connection dropped at 64 %.", action: { label: "Retry", onClick: () => {} } });
};

/** `defaultOpen`: the toasts show at once and stay (the screenshot); otherwise the button shows them. */
export default function ToastTones({ defaultOpen = false }: { defaultOpen?: boolean }) {
  useEffect(() => {
    if (!defaultOpen) return;
    toast.dismiss();
    show();
  }, [defaultOpen]);
  return (
    <>
      <Toaster id={toasterId} label="Notifications" closeLabel="Dismiss" position="bottom-right" expand visibleToasts={4} duration={defaultOpen ? Number.POSITIVE_INFINITY : undefined} />
      <Button variant="outline" onClick={show}>
        Show again
      </Button>
    </>
  );
}

Custom

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

"use client";

import { Avatar } from "@krizaka/ui/avatar";
import { Button } from "@krizaka/ui/button";
import { toast, Toaster } from "@krizaka/ui/toast";
import { useEffect } from "react";

// `toast.custom`: your JSX in the platform's shell — a live notification. One `Toaster` per app, in the root layout.
const show = () =>
  toast.custom(
    () => (
      <div className="flex items-center gap-3">
        <Avatar fallback="MA" size="sm" />
        <div className="flex flex-col">
          <span className="text-sm font-semibold text-fg">Maya started following you</span>
          <span className="text-xs font-normal text-fg-secondary">Just now</span>
        </div>
      </div>
    ),
    { toasterId: "custom" },
  );

export default function ToastCustom({ defaultOpen = false }: { defaultOpen?: boolean }) {
  useEffect(() => {
    if (defaultOpen) show();
  }, [defaultOpen]);
  return (
    <>
      <Toaster id="custom" label="Notifications" closeLabel="Dismiss" position="bottom-right" duration={defaultOpen ? Number.POSITIVE_INFINITY : undefined} />
      <Button variant="outline" onClick={show}>
        Show a notification
      </Button>
    </>
  );
}

Props

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

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.

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

Toast