13Shipped
Callout
Page-level banner for info, warnings, errors, success, and upsell prompts.
Import
import { Callout } from "@charply/design"Variants
Warning
Gestalt BannerCallout-style — task attention without blocking
Upsell
Slim (auth)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "info" | "warning" | "error" | "success" | "upsell" | "info" | Visual intent |
| size | "default" | "slim" | "default" | Padding density |
| title | string | Optional headline | |
| message | string | Body copy (required) | |
| action | CalloutAction | Primary CTA button or link | |
| dismissible | boolean | false | Show dismiss control |
Guidelines
docs/design/components/callout.mdDo
- ✓Use `Callout` for page-level or section-level messages with optional actions
- ✓Pair `variant="error"` with readable copy — not color alone
- ✓Use `upsell` variant for rate limits with one primary action
Don't
- ✗Use `Callout` for toast-style ephemeral feedback — use toast system
- ✗Stack multiple callouts of the same intent in one view
- ✗Duplicate banner markup — import `Callout` or auth templates
- ✗---
See all variants and interactive states in Storybook. Run npm run storybook to open the workbench.