Toasts from anywhere with toast(), toast.success() and toast.error(). Successes time out; errors stay until dismissed. Swipe to dismiss. Part of the Layro System: layro.vercel.app.
import * as React from "react";
import { Toaster, toast } from "@/components/ui/layro-toast";
import { Copy } from "lucide-react";
/* Call toast() from any handler; one Toaster renders them. Successes
leave on their own; errors stay until dismissed, because an error that
disappears before it is read did not happen. */
export default function ToastDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-6">
<div className="w-full min-w-0 rounded-[18px] [corner-shape:squircle] bg-card p-6 text-card-foreground ring-1 ring-border" style={{ maxWidth: 420 }}>
<h2 className="text-[16px] font-semibold tracking-[-0.01em]">Notifications</h2>
<p className="mt-1 mb-5 text-[13px] text-muted-foreground">Info, success and error, each with its own timing.</p>
<div className="flex flex-wrap gap-2">
<button type="button" className="inline-flex h-9 items-center gap-1.5 rounded-[10px] [corner-shape:squircle] bg-background px-3.5 text-[13px] font-medium ring-1 ring-inset ring-border outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" onClick={() => toast("Link copied", { description: "Anyone at Northwind can view." })}><Copy className="size-4" /> Copy link</button>
<button type="button" className="inline-flex h-9 items-center gap-1.5 rounded-[10px] [corner-shape:squircle] bg-background px-3.5 text-[13px] font-medium ring-1 ring-inset ring-border outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" onClick={() => toast.success("Invites sent", { description: "4 people will get an email." })}>Send invites</button>
<button type="button" className="inline-flex h-9 items-center gap-1.5 rounded-[10px] [corner-shape:squircle] bg-background px-3.5 text-[13px] font-medium ring-1 ring-inset ring-border outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring" onClick={() => toast.error("Card declined", { description: "Visa ending 2119. Nothing was charged." })}>Charge card</button>
</div>
<Toaster />
</div>
</div>
);
}
Part of Layro System — browse the full library on 21st.dev.