Command Palette

Search for a command to run...

Components / Feedback

Alert

எச்சரிக்கை

Alerts communicate important status information inline — success, error, warning, or info. They are always visible, unlike toasts which are temporary.

எச்சரிக்கைகள் முக்கியமான நிலை தகவல்களை வரியில் தெரிவிக்கின்றன.

Variants

Component preview
Alert variantsஎச்சரிக்கை வடிவங்கள்

Anatomy

Structure

Anatomy

4 parts documented for implementation and review.

Component map
1

Container

கொள்கலன்required<div>

The root wrapper with role='alert' applied automatically for screen reader announcements. Background and left-border color are tinted by the semantic status token (success, destructive, warning, info). Uses rounded-md with 1px border and subtle 5% tinted background fill.

2

Status icon

நிலை சின்னம்svg

Visual status indicator placed at the start of the alert. Sized at 16×16px (h-4 w-4). Use CheckCircle for success, XCircle for error, AlertCircle for warning, and Info for informational. Color must match the semantic token — never use a mismatched icon/color pair.

3

AlertTitle

தலைப்புrequired<h5>

Short, scannable status label. Renders as a heading element for semantic structure. In bilingual contexts, Tamil title leads followed by English. Keep to 2-4 words maximum. Color inherits from the status token for visual reinforcement.

4

AlertDescription

விளக்கம்<div>

Detailed explanation text. Should instruct the user on what to do next — especially for errors. Renders at muted-foreground color for visual hierarchy below the title. Supports rich content including links, lists, or inline code.

Usage guidance

  • Use Alert for persistent messages that must be read before proceeding.
  • Use Toast for transient confirmation messages that auto-dismiss.
  • Error alerts must include a next action — what should the user do to recover?
  • Tamil alert titles lead; English description follows in bilingual contexts.
  • Always use role="alert" (automatic with this component) for screen readers.
API

Props

2 props
variant
Type
"default" | "destructive" | "success" | "warning" | "info"
Default
"default"
Description
The semantic style tone of the alert box.
className
Type
string
Default
-
Description
Custom classes to merge into the container.

Best practices

Match icon and color to semantic meaning
சின்னம் மற்றும் நிறம் பொருளுக்கு பொருந்த வேண்டும்

Use CheckCircle with green for success, XCircle with red for errors — icon and color must always convey the same meaning.

வெற்றிக்கு பச்சை CheckCircle, பிழைக்கு சிவப்பு XCircle — சின்னமும் நிறமும் ஒரே பொருளை தர வேண்டும்.

Don't use destructive styling for informational alerts
தகவல் எச்சரிக்கைக்கு அழிவுகரமான வடிவமைப்பை பயன்படுத்தாதே

Using red/destructive colors for a neutral info message creates false urgency and confuses users.

சாதாரண தகவலுக்கு சிவப்பு நிறம் பயன்படுத்துவது தவறான அவசரத்தை உருவாக்கும்.

Include a recovery action in error alerts
பிழை எச்சரிக்கையில் மீட்பு செயல் சேர்க்கவும்

Always tell users what to do next — a retry link, a support contact, or a clear next step.

பிழை ஏற்பட்டால் அடுத்து என்ன செய்வது என்று பயனருக்கு தெரிவிக்கவும்.

Don't show error alerts with no guidance
வழிகாட்டுதல் இல்லாமல் பிழை காட்டாதே

An error message with no actionable guidance leaves users stuck and frustrated.

செயல்பாட்டு வழிகாட்டுதல் இல்லாத பிழை செய்தி பயனரை திக்கற்றவராக்கும்.