Toast

Imperative Sonner-powered notifications; render <Toaster /> once at the app root.

Brief, non-blocking notifications, powered by Sonner. Call toast.success(...), toast.error(...), toast.info(...), toast.warning(...), toast.loading(...), or toast.promise(...) from anywhere to push a styled, icon-prefixed message. Render <Toaster /> once near your app root so the toasts have somewhere to mount.

Import

tsx

1import { toast, Toaster } from "@yuhuanowo/yunui";

Setup

Mount the Toaster once at the root of your app (e.g. in your root layout). It positions itself bottom-right and styles every toast with the design-system tokens.

tsx

1// app/layout.tsx
2import { Toaster } from "@yuhuanowo/yunui";
3 
4export default function RootLayout({ children }) {
5  return (
6    <html>
7      <body>
8        {children}
9        <Toaster />
10      </body>
11    </html>
12  );
13}

Basic

Because toast(...) is imperative, trigger it from an event handler inside a client component.

Fire a toast

tsx

1"use client";
2 
3import { toast, Button } from "@yuhuanowo/yunui";
4 
5export function ToastDemo() {
6  return (
7    <div className="flex flex-wrap gap-3">
8      <Button onClick={() => toast.success("Saved", "Your changes are live.")}>Success</Button>
9      <Button variant="red" onClick={() => toast.error("Failed", "Could not reach the server.")}>Error</Button>
10      <Button variant="outline" onClick={() => toast.info("Heads up", "A new version is available.")}>Info</Button>
11      <Button variant="amber" onClick={() => toast.warning("Careful", "This will overwrite your draft.")}>Warning</Button>
12    </div>
13  );
14}

Methods

Method	Signature	Description
`toast.success`	`(message, description?)`	Green success toast with a check icon.
`toast.error`	`(message, description?)`	Red error toast with an alert icon.
`toast.info`	`(message, description?)`	Blue informational toast.
`toast.warning`	`(message, description?)`	Amber warning toast.
`toast.loading`	`(message)`	Spinner toast; returns an id you can later dismiss.
`toast.promise`	`(promise, { loading, success, error })`	Drives a toast through a promise's lifecycle.
`toast.dismiss`	`(id?)`	Dismisses a specific toast, or all of them.

Import

Setup

Basic

Methods

On this page