Yugen UI

Sonner

Sonner stacks short notifications in a corner: the newest in front, older ones behind, fanning out on hover.

Place <Sonner /> once at the app root, then call sonner("…"), sonner.success(…) or sonner.promise(…) from anywhere. Calling again with the same id replaces the content in place. Hovering or focusing the region fans the stack out into a list and pauses the timers; swipe to dismiss; F8 moves focus to the region. Toast stays for a fixed list of notifications in the Fluent style.

    Import

    Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.

    TSX
    // npm install yugen-uiimport { Sonner, sonner } from "yugen-ui";

    Variants

    Each tile is a standalone example: hover to copy, or press Code to see the source.

      Types

      Default has no icon; success, info, warning and error use the MessageBar icons; loading never closes on its own.

        Following a promise

        sonner.promise shows loading, then turns into success or error in place. success / error accept a function to use the result.

          Stack & expand

          At most visibleToasts (3) are shown; older ones wait behind. expand keeps the stack open.

            Position, richColors & close button

            richColors tints the background and border by type; closeButton adds an X; cancel is a secondary button that dismisses.

            Usage

            Do
            • Use it for short feedback after an action: saved, sent, deleted with Undo.
            • Use sonner.promise for background work so people see the result without waiting.
            • Set altText on the action when its label is not a string.
            Don't
            • Don't put important information only in a notification. It disappears.
            • Don't place a Toaster and a Sonner in the same corner of one app.
            • Don't put a form or more than two buttons in one notification.

            Props

            Prop · TypeDefaultDescription
            position"top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end"Default: "bottom-end"Position of the region; start / end follow the reading direction.
            expandbooleanDefault: falseAlways shown as a list.
            visibleToastsnumberDefault: 3Number of notifications shown at once.
            richColorsbooleanDefault: falseBackground and border by type, like MessageBar.
            closeButtonbooleanDefault: falseClose (X) button on every notification; each one can override it.
            durationnumberDefault: 4000Default time before closing (ms).
            gapnumberDefault: 12Space between notifications when expanded, and how much peeks out when stacked (px).
            sonnerIdstringDefault: —With several Sonners: only notifications sent with the same sonnerId show here.
            sonner(title, options?)stringDefault: —Shows a notification and returns its id. Also .success, .info, .warning, .error, .loading.
            sonner.promise(promise, data)stringDefault: —data: { loading, success, error } plus the other options; success / error take a value or a function.
            sonner.dismiss(id?)voidDefault: —Dismisses one notification, or all of them without an id.
            SonnerOptions.descriptionReactNodeDefault: —Line below the title.
            SonnerOptions.action{ label; altText?; onClick? }Default: —Primary button; call event.preventDefault() in onClick to keep the notification open.
            SonnerOptions.cancel{ label; altText?; onClick? }Default: —Secondary button that dismisses the notification.
            SonnerOptions.idstringDefault: —Call again with the id of an open notification to replace its content in place.
            SonnerOptions.iconReactNodeDefault: —Replaces the type icon; null = no icon.
            SonnerOptions.durationnumberDefault: —Overrides the time before closing; Infinity = stays open.
            SonnerOptions.onDismiss(id: string) => voidDefault: —Closed by the user (button, swipe, Esc) or by sonner.dismiss.
            SonnerOptions.onAutoClose(id: string) => voidDefault: —The timer ran out.

            Messages

            Text built into the component: labels, aria-labels, screen reader announcements.

            English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.

            messages.sonner

            Key · TypeDefault (English)messagesVi
            regionstring

            Tên vùng thông báo cho trình đọc màn hình.

            		Default (English)"Notifications"messagesVi"Thông báo"
            regionHotkeystring

            Tên vùng kèm phím tắt nhảy tới; {hotkey} được thay bằng phím tắt (F8).

            		Default (English)"Notifications ({hotkey})"messagesVi"Thông báo ({hotkey})"
            dismissstring

            Nhãn nút đóng từng thông báo.

            		Default (English)"Dismiss notification"messagesVi"Đóng thông báo"