Feedback / Toast
Toast
Slaps onto the bottom of the screen like a stamp, then lifts off after a few seconds.
Client componentWCAG AASince v0.1
Report sent
Couldn’t send. Saved for later.
import { toast } from "@plop-ui/react";
toast.success("Report sent");
toast.error("Couldn't send. Saved for later.");
toast("Mobile 2 is 6 min away", { duration: 6000 });
// Behind a live toast: a solid gradient wash (default), comic dots, or nothing.
<PlopProvider toastBackdrop="solid" /> // "dots" | "none"Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | — |
| buddy | boolean | BuddyMood | none | A character peeks over the toast: `true` picks one for the kind, or name a mood. |
| className | string | none | — |
| kind | "success" | "error" | "info" | none | — |
Use it well
DoConfirm something that already happened: "Report sent".
Don'tAsk a question or hide a button in a toast. It disappears.
Accessibility
- Shown in a polite live region (role="status") rendered by PlopProvider.
- Stays 4 seconds by default; never the only place an important message appears.