Components/Callout

Feedback component

Callout

Loud ink-bordered notice block for tips, warnings, errors, and announcements. Solid saturated fill — designed to stop the eye. 6 tones, optional title and icon slot.

Display6 tonesTitle + icon slots
components/feedback/Callout.jsx
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
PropTypeDefaultDescription
tone"yellow"|"lime"|"pink"|"blue"|"coral"|"dark""yellow"Background fill. Foreground is automatically set for contrast.
titlestringnullOptional bold heading rendered above children.
iconReactNodenullIcon placed in a 28×28 square left of the text block.
childrenReactNodeBody 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>