Alert Displays a callout for user attention with semantic variants.
npx vayu-ui init # Add Theme CSS if not added npx vayu-ui add -t alert # With test case needs Preview Code
Alert Example Information This is an informational alert to highlight something important.
Success Your changes have been successfully saved.
Warning Your account is about to expire. Please renew your subscription.
Error There was an error processing your request. Please try again.
< Alert variant = "info" > < Alert.Icon variant = "info" > < Info className = "w-5 h-5" /> </ Alert.Icon > < Alert.Content > < Alert.Title >Information</ Alert.Title > < Alert.Description > This is an informational alert to highlight something important. </ Alert.Description > </ Alert.Content > </ Alert > < Alert variant = "success" > < Alert.Icon variant = "success" > < CheckCircle className = "w-5 h-5" /> </ Alert.Icon > < Alert.Content > < Alert.Title >Success</ Alert.Title > < Alert.Description > Your changes have been successfully saved. </ Alert.Description > </ Alert.Content > < Alert.Dismiss variant = "success" alertTitle = "Success" onClick = {() => setShowSuccess ( false )} /> </ Alert > < Alert variant = "warning" > < Alert.Icon variant = "warning" > < TriangleAlert className = "w-5 h-5" /> </ Alert.Icon > < Alert.Content > < Alert.Title >Warning</ Alert.Title > < Alert.Description > Your account is about to expire. Please renew your subscription. </ Alert.Description > </ Alert.Content > </ Alert > < Alert variant = "error" > < Alert.Icon variant = "error" > < XCircle className = "w-5 h-5" /> </ Alert.Icon > < Alert.Content > < Alert.Title >Error</ Alert.Title > < Alert.Description > There was an error processing your request. Please try again. </ Alert.Description > </ Alert.Content > < Alert.Dismiss variant = "error" alertTitle = "Error" onClick = {() => setShowError ( false )} /> </ Alert > < Alert variant = "info" > < Alert.Icon variant = "info" > < Info className = "w-5 h-5" /> </ Alert.Icon > < Alert.Content > < Alert.Title >Title</ Alert.Title > < Alert.Description >Description text goes here.</ Alert.Description > </ Alert.Content > < Alert.Dismiss variant = "info" alertTitle = "Title" onClick = {() => {}} /> </ Alert > Part Description AlertRoot container with variant styling Alert.IconIcon wrapper with variant color Alert.ContentFlex wrapper for title and description Alert.TitleHeading rendered as <h5> Alert.DescriptionBody text below the title Alert.DismissDismiss button positioned top-right
Keyboard support : Alert.Dismiss is focusable via Tab and activatable with Enter or SpaceARIA attributes : Root uses role="alert" (warning/error) or role="status" (info/success) with corresponding aria-live valuesFocus behavior : Alert.Dismiss displays a variant-colored focus ring on focus-visible
Info and success alerts use role="status" with aria-live="polite", so screen readers announce changes without interrupting the user. Warning and error alerts use role="alert" with aria-live="assertive", which causes an immediate announcement. The root has aria-atomic="true" so the full alert content is read on any change. Icons are marked aria-hidden="true" and are purely decorative. The dismiss button includes a descriptive aria-label such as "Dismiss error alert: Error".
Alert/ ├── Alert.tsx ├── AlertIcon.tsx ├── AlertTitle.tsx ├── AlertDescription.tsx ├── AlertContent.tsx ├── AlertDismiss.tsx ├── types.ts ├── index.ts └── README.md Prop Type Default Description variant'info' | 'success' | 'warning' | 'error''info'Visual style of the alert childrenReactNode- Content inside the alert classNamestring- Additional CSS classes
Prop Type Default Description variant'info' | 'success' | 'warning' | 'error''info'Variant for icon color childrenReactNode- Icon element to render classNamestring- Additional CSS classes
Prop Type Default Description childrenReactNode- Title text classNamestring- Additional CSS classes
Prop Type Default Description childrenReactNode- Description text classNamestring- Additional CSS classes
Prop Type Default Description childrenReactNode- Wrapper for title and description classNamestring- Additional CSS classes
Prop Type Default Description variant'info' | 'success' | 'warning' | 'error''info'Variant for focus ring styling alertTitlestring- Title for descriptive aria-label onClick() => void- Callback when dismiss is clicked classNamestring- Additional CSS classes