Feedback / Callout
Callout
A strip torn off a pad. Use it for things people need to know before they act, not for decoration.
Server ComponentWCAG AASince v0.1
Two responders are near this pin
Mobile 2 and Mobile 5 are both within 2 km.
Location is approximate
Confirm a landmark before dispatching.
Couldn’t reach the station
Your report is saved on this phone.
Report received
Reference number 24-1187.
import { Callout, Button } from "@plop-ui/react";
<Callout tone="warn" title="Location is approximate">
Confirm a landmark before dispatching.
</Callout>
<Callout tone="error" title="Couldn't reach the station" action={<Button size="sm" variant="plain">Try again</Button>}>
Your report is saved on this phone.
</Callout>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| title required | ReactNode | — | — |
| action | ReactNode | none | A button under the text, e.g. "Try again". |
| buddy | boolean | BuddyMood | none | A character peeks over the strip: `true` picks one for the tone (Specs, Snooze, Bix, Pip), or name a mood. |
| children | ReactNode | none | — |
| className | string | none | — |
| headingLevel | 2 | 3 | 4 | 3 | Heading level of the title. |
| role | "alert" | "status" | none (it is just content) | `alert` for errors that need attention right away. |
| tilt | number | -0.5 | Rotation in degrees. |
| tone | "success" | "error" | "info" | "warn" | info | Sets the color and icon: info, warn, error or success. |
Use it well
DoPut the callout right before the action it's about.
Don'tStack callouts at the top of a page. People stop reading them.
Accessibility
- Every tone has an icon and a title; color only repeats it.
- Pass role="alert" for errors that need attention right away.