build69
build69  /  Components  /  Feedback & Status  /  Alert

Alert

v1.0.14Updated 19 Oct 2026

Inline 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

View source← Back to catalog

Preview

Live · 14 stories
DefaultOpen ↗
▸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.

get_registry_item({ name: "Alert" })

Usage

import { Alert } from '@/components/feedback/alert';

<Alert tone="warning" countdown={5000} action={<Button size="sm">Undo</Button>}>
  Invoice deleted.
</Alert>

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
emphasis

Visual emphasis (how loud)

'solid' | 'soft' | 'outline' | 'ghost' | 'link'—
tone

Semantic tone (what it means)

'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'—
countdown

Auto-dismiss ms

number—
expandable

Toggle additional detail

boolean—
action

Action button

ReactNode—
inline

Compact inline tone

boolean—

Every tonal component shares the same tone × emphasis API, so the pair looks identical across Button, Badge, Alert and more.

Related

Platform docsAll componentsSource files