Shadcn
Sonner 消息通知
通过 Toaster 承载非阻塞的短时消息通知。
Preview
"use client"
import { toast } from "sonner"
import { Button } from "@scopify/ui/shadcn/components/button"
export function SonnerDemo() {
return (
<Button
variant="outline"
onClick={() =>
toast("Event has been created", {
description: "Sunday, December 03, 2023 at 9:00 AM",
action: {
label: "Undo",
onClick: () => console.log("Undo"),
},
})
}
>
Show Toast
</Button>
)
}
About
Sonner is built and maintained by emilkowalski.
Scopify 说明
本页按 shadcn/ui 官方 Radix UI 组件文档的章节与示例完整整理。示例预览使用 Scopify 当前的 @scopify/ui/shadcn 实现；导入路径、主题 Token 和行为差异以本仓库源码为准。
Installation
Run the following command:
npx shadcn@latest add sonnerAdd the Toaster component
import { Toaster } from "@scopify/ui/shadcn/components/sonner"
export default function RootLayout({ children }) {
return (
<html lang="en">
<head />
<body>
<main>{children}</main>
<Toaster />
</body>
</html>
)
}Usage
import { toast } from "sonner"toast("Event has been created.")Types
Preview
"use client"
import { toast } from "sonner"
import { Button } from "@scopify/ui/shadcn/components/button"
export function SonnerTypes() {
return (
<div className="flex flex-wrap gap-2">
<Button variant="outline" onClick={() => toast("Event has been created")}>
Default
</Button>
<Button
variant="outline"
onClick={() => toast.success("Event has been created")}
>
Success
</Button>
<Button
variant="outline"
onClick={() =>
toast.info("Be at the area 10 minutes before the event time")
}
>
Info
</Button>
<Button
variant="outline"
onClick={() =>
toast.warning("Event start time cannot be earlier than 8am")
}
>
Warning
</Button>
<Button
variant="outline"
onClick={() => toast.error("Event has not been created")}
>
Error
</Button>
<Button
variant="outline"
onClick={() => {
toast.promise<{ name: string }>(
() =>
new Promise((resolve) =>
setTimeout(() => resolve({ name: "Event" }), 2000)
),
{
loading: "Loading...",
success: (data) => `${data.name} has been created`,
error: "Error",
}
)
}}
>
Promise
</Button>
</div>
)
}
Description
Preview
"use client"
import { toast } from "sonner"
import { Button } from "@scopify/ui/shadcn/components/button"
export function SonnerDescription() {
return (
<Button
onClick={() =>
toast("Event has been created", {
description: "Monday, January 3rd at 6:00pm",
})
}
variant="outline"
className="w-fit"
>
Show Toast
</Button>
)
}
Position
Use the position prop to change the position of the toast.
Preview
"use client"
import { toast } from "sonner"
import { Button } from "@scopify/ui/shadcn/components/button"
export function SonnerPosition() {
return (
<div className="flex flex-wrap justify-center gap-2">
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "top-left" })
}
>
Top Left
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "top-center" })
}
>
Top Center
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "top-right" })
}
>
Top Right
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "bottom-left" })
}
>
Bottom Left
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "bottom-center" })
}
>
Bottom Center
</Button>
<Button
variant="outline"
onClick={() =>
toast("Event has been created", { position: "bottom-right" })
}
>
Bottom Right
</Button>
</div>
)
}
API Reference
See the Sonner API Reference for more information.