#1042 · Draft
Flooded underpass on Rizal Ave
Not sent yet. Check the location before you dispatch.
Preview
Feedback / Buddy
Buddy
A cast of characters, one per state: Pip cheers success, Bix winces at errors, Snooze dozes on stale data, Confetti celebrates, Specs previews and Hum thinks while loading. Stand one alone, or let it peek over any component.
Server componentWCAG AANew
- Pip
mood="success"Cheers when something worked: saved, sent, copied. - Bix
mood="error"Winces when something failed and needs another try. - Snooze
mood="stale"Dozes off when data is out of date or still waiting. - Confetti
mood="congrats"Throws a little party for milestones: shift done, all clear. - Specs
mood="preview"Peeks at previews, drafts and things worth a look. - Hum
mood="thinking"Mulls it over while something loads or works.
Copied to clipboard
Couldn't send. Saved for later.
Shift closed. Nice work!
Last update 12 min ago
Unit positions may be stale. Pull to refresh.
import { Buddy, BuddyPeek, Callout, toast } from "@plop-ui/react";
<Buddy mood="congrats" size="lg" />
// Peek over anything: the head ducks behind it, the hands grip the edge.
<BuddyPeek mood="preview">
<TicketCard title="Flooded underpass" meta="#1042 · Draft" />
</BuddyPeek>
// Built into Toast and Callout: true picks the character for the kind or tone.
toast.success("Copied to clipboard", { buddy: true }); // Pip
toast("All units checked in", { buddy: "congrats" }); // Confetti
<Callout tone="warn" title="Last update 12 min ago" buddy /> // Snooze
// On a Button: pick who peeks over it.
<Button variant="tomato" buddy buddyMood="error">Retry</Button> // BixChange every prop live in the playground.
Props
Buddy
| Prop | Type | Default | What it does |
|---|---|---|---|
| mood required | "success" | "error" | "stale" | "congrats" | "preview" | "thinking" | — | Which character, and so which state it stands for. |
| className | string | none | — |
| hands | boolean | false | Show two hands gripping the bottom edge (for peeking over things). |
| label | string | none | What the character is telling people, e.g. "Report sent". When set, it is announced as an image; leave it out when the words are already next to it (the character is then decorative). |
| size | "sm" | "md" | "lg" | md | `sm` 56px, `md` 84px, `lg` 120px wide. |
| style | CSSProperties | none | — |
BuddyPeek
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | The thing the character peeks over: a toast, a card, a callout, a button. |
| mood required | "success" | "error" | "stale" | "congrats" | "preview" | "thinking" | — | — |
| className | string | none | — |
| label | string | none | Read out with the content, e.g. "Report sent". Usually leave it out: the content already says it. |
| side | "start" | "end" | start | Which end of the top edge it peeks from. |
| size | "sm" | "md" | "lg" | none | — |
Use it well
DoLet one character stand for one state everywhere, so people learn to read it: Bix always means something failed.
Don'tUse a character as the only signal. Say it in words too; the character just makes it quicker to read.
Accessibility
- Decorative by default (aria-hidden); the words next to it carry the message.
- Pass label to announce it as an image when it stands alone.
- Pop, wince and confetti play once; Snooze's z's and Hum's bubbles keep going while the state lasts. Everything holds still under reduced motion.