Alert
v1.0.7Updated 27 Aug 2026Inline callout for short, contextual messages (info, warning, error, success). Not a toast — stays in the layout. Now ships the full tone × emphasis matrix, action slot, countdown auto-dismiss, expandable details, and a
Preview
Live · 14 storiesDefaultOpen ↗
▸Why this is recommendedcalloutnoticebannerinline+3
The default, out-of-the-box Alert.
Recommended for+14
- ✓Form-level error messages
- ✓Page-level info banners
- ✓Empty-state hints
- ✓Onboarding tips with countdown
Tags+6
calloutnoticebannerinlinecountdownexpandabledefault
Features+4
- Tone × emphasis (semantic colour × fill loudness)
- Optional icon + title + description
- Tone × emphasis matrix (neutral / info / success / warning / danger / primary × solid / soft / outline / ghost / link)
- Action slot (primary + dismiss)
- Countdown auto-dismiss with progress
- Expandable details slot
- Inline (compact) tone
- Dismissable
Not recommended for−2
- ✕Transient feedback (use Sonner toasts)
- ✕Dialogs (use Dialog)
Install
Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.
Usage
Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.
Props
PropTypeRequired
emphasisVisual emphasis (how loud)
—toneSemantic tone (what it means)
—countdownAuto-dismiss ms
—expandableToggle additional detail
—actionAction button
—inlineCompact inline tone
—Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.