Sonner

התראות מסוג "טוסט מוערם" לאישורי שמירה, העלאות וחלונות ביטול — עם עיצוב בסגנון "ניאו-ברוטליסטי" הכולל מסגרות וצללים.

"use client"

import { toast } from "sonner"

Sonner מציב toasts מוערמים שנעלמים אוטומטית על המסך מקריאת toast() אחת — מרכיבים <Toaster /> אחד ויורים התראות מכל מקום, בלי חיווט context. זה לא פרימיטיב של Radix או Base UI: שני הווריאנטים של ה-backend עוטפים את אותה ספריית Sonner של emilkowalski, מעוצבת לפי המתכון הנאו-ברוטליסטי: מסגרות עבות, צללים חדים וטיפוגרפיה מודגשת.

השתמשו בו כש:

משוב על פעולות — "נשמר", "הועתק ללוח", "ההגדרות עודכנו" אחרי שמוטציה מסתיימת.
פעולות אסינכרוניות — toast.promise() עוקב אחרי העלאה או deploy מטעינה להצלחה או שגיאה ב-toast אחד.
חלונות undo — מחיקות וארכובים עם כפתור פעולה, כך שלפעולות הרסניות יש תקופת חסד.

אודות

Sonner נבנה ומתוחזק על-ידי emilkowalski.

התקנה

הריצו את הפקודה הבאה:


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
npx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/sonner.json

הוסיפו את הרכיב Toaster.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

התקינו את התלויות הבאות:


pnpm add sonner next-themes
npm install sonner next-themes
yarn add sonner next-themes
bun add sonner next-themes

העתיקו והדביקו את הקוד הבא לפרויקט שלכם.

components/ui/sonner.tsx

"use client"

import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: <CircleCheckIcon className="size-4" />,
        info: <InfoIcon className="size-4" />,
        warning: <TriangleAlertIcon className="size-4" />,
        error: <OctagonXIcon className="size-4" />,
        loading: <Loader2Icon className="size-4 animate-spin" />,
      }}
      toastOptions={{
        // Fully unstyled so the neobrutalist recipe below owns every surface:
        // hard offset shadow, 2px border, square corners, press-down buttons.
        unstyled: true,
        classNames: {
          toast:
            "group/toast relative flex w-(--width) items-center gap-3 rounded border-2 border-border bg-popover p-4 font-sans text-popover-foreground shadow-md",
          content: "flex min-w-0 flex-col gap-0.5",
          title: "font-head text-sm font-medium",
          description: "text-sm text-muted-foreground",
          icon: "shrink-0",
          actionButton:
            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
          cancelButton:
            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-muted px-2 py-1 text-xs font-medium text-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
          closeButton:
            "absolute -top-2 -start-2 rounded-full border-2 border-border bg-background p-0.5 transition-colors hover:bg-muted",
          success: "[&_[data-icon]]:text-chart-2",
          warning: "[&_[data-icon]]:text-chart-1",
          error: "[&_[data-icon]]:text-destructive",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }

הוסיפו את הרכיב Toaster.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Toaster />
        <main>{children}</main>
      </body>
    </html>
  )
}

שימוש

import { toast } from "sonner"

toast("Event has been created.")

דוגמאות

סוגים

"use client"

import { toast } from "sonner"

תיאור

"use client"

import { toast } from "sonner"

מיקום

השתמשו במאפיין position כדי לשנות את מיקום הטוסט.

"use client"

import { toast } from "sonner"

נגישות

אין דפוס WAI-ARIA APG ייעודי ל-toasts; ההנחיה הקרובה ביותר היא דפוס Alert. Sonner מרנדר toasts לאזור live מנומס של ARIA, כך שקוראי מסך מכריזים עליהם בלי לגנוב מוקד. האזור יושב מחוץ לסדר ה-tab הרגיל — נגיש רק דרך ה-hotkey — וטיימרי הסגירה נעצרים בזמן שהערימה ב-hover, בפוקוס, או שהטאב מוסתר.

אינטראקציות מקלדת:

מקש	פעולה
`Alt + T`	ממקדים ומרחיבים את ערימת ה-toast (ניתן להגדרה דרך prop ה-`hotkey` על `Toaster`)
`Tab` / `Shift + Tab`	עוברים בין toasts וכפתורי הפעולה / הסגירה שלהם
`Enter` / `Space`	מפעילים את כפתור הפעולה או הסגירה שבפוקוס
`Escape`	מכווצים את ערימת ה-toast בזמן שהמוקד בתוכה

תיעוד ה-API

למידע נוסף, עיינו בתיעוד ה-API של Sonner.