Toast container and notifications for action feedback.
$ npx context-ds add sonnerUse it for
Confirming an action that happened.
Avoid
Dependencies: sonner
"use client";import { useEffect } from "react";import { toast } from "sonner";import { Button } from "@/components/ui/button";import { Toaster } from "@/components/ui/sonner";const showKeyCreated = () => toast("Key created", { id: "key-created", toasterId: "toast-example", description: "Copy it now; it won't be shown again.", duration: Infinity });// A toast raised on load and held, in a Toaster pinned to this frame (`absolute` instead of the viewport's `fixed`) so// it shows here. In an app, mount one <Toaster /> near the root and call toast() from anywhere.export function Product() { useEffect(() => { showKeyCreated(); }, []); return ( <div className="relative flex h-48 justify-center"> <Button variant="outline" onClick={showKeyCreated}> Create key </Button> <Toaster id="toast-example" style={{ position: "absolute" }} /> </div> );}"use client";import * as React from "react";import { Toaster as Sonner, type ToasterProps } from "sonner";// The brand's toasts (src/components/ui/sonner.tsx): white with a light border and a soft shadow, the description muted,// a close button on each, at the bottom center (src/app/providers.tsx). Sonner's own enter and exit motion is kept.function Toaster(props: ToasterProps) { return ( <Sonner className="toaster group" position="bottom-center" closeButton toastOptions={{ classNames: { toast: "bg-surface! text-fg! border! border-line! shadow-[0_0.25rem_0.75rem_rgb(0_0_0/0.08)]! font-sans! text-body-sm!", description: "text-fg-muted!", actionButton: "rounded-control! bg-primary! text-on-primary!", cancelButton: "rounded-control! bg-subtle! text-fg-muted!", closeButton: "bg-surface! text-fg! border-line! hover:bg-wash-hover!", }, }} {...props} /> );}export { Toaster };Reference: src/components/ui/sonner.tsx.