Sonner

针对保存确认、上传和撤销窗口，采用堆叠式通知设计——并运用了新粗野主义风格的边框与阴影处理效果。

"use client"

import { toast } from "sonner"

Sonner 只需一次 toast() 调用，就能在屏幕上堆叠出会自动消失的 toast——挂载一个 <Toaster />，然后在任何地方触发通知，无需接任何 context。它不是 Radix 或 Base UI 的基元：两种后端变体封装的都是 emilkowalski 的同一个 Sonner 库，并按新粗野主义的配方设计：粗边框、硬阴影、加粗字体。

适合以下场景：

操作反馈——变更完成后弹出「已保存」「已复制到剪贴板」「设置已更新」。
异步操作——toast.promise() 用一条 toast 就能把上传或部署从加载一路跟到成功或失败。
撤销窗口——删除和归档时附带一个操作按钮，让破坏性操作留出一段反悔时间。

关于

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"

无障碍

toast 没有专门的 WAI-ARIA APG 模式，最接近的指引是 Alert 模式。Sonner 会把 toast 渲染到一个 polite 的 ARIA 实时区域里，因此屏幕阅读器会播报它们，同时又不会抢走焦点。这个区域不在正常的 Tab 顺序中——只能通过热键抵达——而且当指针悬停在堆叠上、焦点位于其中，或者标签页被隐藏时，自动关闭的计时器会暂停。

键盘交互：

按键	操作
`Alt + T`	聚焦并展开 toast 堆叠（可通过 `Toaster` 的 `hotkey` 属性配置）
`Tab` / `Shift + Tab`	在各条 toast 及其操作按钮、关闭按钮之间移动
`Enter` / `Space`	激活当前聚焦的操作按钮或关闭按钮
`Escape`	焦点位于堆叠内部时收起 toast 堆叠

API 参考

更多信息请参阅 Sonner API 参考。