Alert

Basic

Contextual feedback messages for inline notifications, validation, system status, tips, and collapsible information blocks. Supports 5 semantic variants, dismissible close, collapsible mode, and animated entrance.

<Alert variant="info">You can press Ctrl+S to save your work at any time.</Alert><Alert variant="success">Your order has been confirmed and is being processed.</Alert><Alert variant="warning">Your session will expire in 5 minutes. Save your work.</Alert><Alert variant="danger">Unable to reach the server. Check your network connection.</Alert><Alert variant="default">This is a generic note without semantic meaning.</Alert>

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add alert

pnpm dlx @work-rjkashyap/unified-ui add alert

npx @work-rjkashyap/unified-ui add alert

bunx @work-rjkashyap/unified-ui add alert

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Alert,
	Callout,
} from "@work-rjkashyap/unified-ui";

Basic Usage

<Alert variant="info" title="Did you know?">
  Unified UI components are fully tree-shakeable via layer-specific imports.
</Alert>

<Alert variant="danger" dismissible onDismiss={() => setVisible(false)}>
  Something went wrong. Please try again.
</Alert>

<Alert variant="info" title="FAQ" collapsible defaultOpen={false}>
  Expandable content goes here.
</Alert>

Variants

Alert supports five semantic variants that determine color, icon, and ARIA role.

Info (default)

Used for informational messages, tips, and notes. Renders with role="status" (polite live region).

<Alert variant="info">You can drag and drop files to upload them.</Alert>

Success

Used for positive outcomes like confirmations and completions. Renders with role="status".

<Alert variant="success">Your profile has been updated successfully.</Alert>

Warning

Used for caution messages and deprecation notices. Renders with role="alert" (assertive live region).

<Alert variant="warning">This API endpoint will be removed in v3.0. Please migrate to the newendpoint.</Alert>

Danger

Used for error messages and destructive action warnings. Renders with role="alert".

<Alert variant="danger">Could not delete the resource. You may not have sufficient permissions.</Alert>

Default

A neutral variant with no semantic color. Use for generic notes that don't fit info/success/warning/danger. Renders with role="status".

<Alert variant="default">This callout uses the neutral default variant for generic notes.</Alert>

Without Title

Alerts can be rendered without a title for simpler, single-line messages.

<Alert variant="info">This feature is currently in beta.</Alert><Alert variant="warning">Maintenance scheduled for tomorrow at 3:00 AM UTC.</Alert>

Dismissible

Add the dismissible prop to show a close button. Provide an onDismiss callback to control visibility externally, or let the alert manage its own visibility.

// Controlled<Alert variant="danger" dismissible onDismiss={() => setVisible(false)}>Something went wrong. Please try again.</Alert>// Self-managed (hides itself when dismissed)<Alert variant="info" dismissible>This alert will hide itself when dismissed.</Alert>

Collapsible

Set collapsible to make the body expandable/collapsible. The chevron animates on toggle. Use defaultOpen to control initial state.

{/* Collapsed by default */}<Alertvariant="info"collapsibledefaultOpen={false}>You are billed at the start of each month...</Alert>{/* Expanded by default */}<Alertvariant="warning"collapsibledefaultOpen>Before migrating, ensure you have exported a full backup...</Alert>

Animated

Set animated to enable a fade-in entrance animation. The animation respects prefers-reduced-motion.

<Alert variant="success" animated>Version 2.4.1 is live on production.</Alert><Alert variant="info" animated>This animated alert fades in on mount.</Alert>

Custom Icons

Override the default variant icon with the icon prop, or pass null to hide it entirely.

{/* Custom emoji icon */}<Alertvariant="info"icon={<span>💡</span>}>You can pin your most-used commands to the sidebar.</Alert>{/* Hide icon entirely */}<Alert variant="warning" icon={null}>This alert has no icon.</Alert>

In Context

A common pattern is to place alerts above or below forms to provide contextual guidance.

<form className="flex flex-col gap-4">
	<Alert variant="info" title="Changing your email">
		A verification link will be sent to your new address. Your current email
		remains active until the new one is confirmed.
	</Alert>

	<div className="flex flex-col gap-1.5">
		<label className="text-sm font-medium">New Email</label>
		<Input type="email" placeholder="you@example.com" />
	</div>

	<Button variant="primary">Update Email</Button>
</form>

Migrating from Callout

The Callout component has been merged into Alert. The Callout export is still available as a backward-compatible alias that defaults to animated={true} and rounded-lg.

// Before (Callout)
import { Callout } from "@work-rjkashyap/unified-ui";
<Callout variant="info" title="Did you know?" collapsible>
	Content here.
</Callout>;

// After (Alert) — equivalent
import { Alert } from "@work-rjkashyap/unified-ui";
<Alert
	variant="info"
	title="Did you know?"
	collapsible
	animated
	className="rounded-lg"
>
	Content here.
</Alert>;

Props

Motion

• Animated entrance — fadeIn preset with opacity: 0 → 1 and subtle translate. Opt-in via animated prop.
• Collapsible — expandHeight preset for smooth height transitions when toggling open/close.
• Chevron rotation — Smooth 180° rotation on the collapsible toggle indicator.
• All animations respect prefers-reduced-motion — disabled automatically when the user prefers reduced motion.

Accessibility

• Danger and warning alerts use role="alert" (assertive live region) — screen readers announce them immediately.
• Info, success, and default alerts use role="status" (polite live region) — announced at the next opportunity.
• Each variant renders a unique icon so meaning is never conveyed by color alone (WCAG 1.4.1).
• The dismiss button has a configurable aria-label (defaults to "Dismiss alert").
• Collapsible header uses aria-expanded for screen readers and responds to Enter / Space.
• Icons are decorative and marked with aria-hidden="true".
• The chevron icon is aria-hidden="true".

Design Tokens