Tones
All 6 tones — with icon + title
!
Warning
This action cannot be undone. Please review before continuing.
★
Highlight
New: bulk export is now available for all plans.
▸
Notice
Check your campaign settings before going live.
i
Info
Your plan resets on the 1st of each month.
✕
Error
Failed to save. Check your connection and try again.
▸
Dark
Use for system messages, changelogs, and code-adjacent notes.
Without title
title prop is optional — body-only callout
!
Your trial expires in 3 days. Upgrade to keep access to all features.
No icon, no title — just inline informational text inside a callout container.
Do / Don't
✓ Do
!
Your trial ends in 3 days.
✕ Don't
Tip 1: Do this.
Tip 2: Also this.
Tip 3: And this too.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "yellow"|"lime"|"pink"|"blue"|"coral"|"dark" | "yellow" | Background fill. Foreground is automatically set for contrast. |
| title | string | null | Optional bold heading rendered above children. |
| icon | ReactNode | null | Icon placed in a 28×28 square left of the text block. |
| children | ReactNode | — | Body content. |
Usage
import { Callout } from "components/feedback/Callout";
<Callout tone="yellow" title="Warning" icon="!">
This action cannot be undone.
</Callout>
<Callout tone="coral" title="Error">
Failed to save changes. Try again.
</Callout>