Not FoundElixir UI

Getting Started

Installation

Components

Templates

More

Alert

Display important messages, notifications, or status updates to users with the Alert component. Supports different variants for various types of information.

Installation

Add the Alert component to your project:

npx @elixir-labs/ui add alert

Usage

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function MyComponent() {
  return (
    <Alert>
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the cli.
      </AlertDescription>
    </Alert>
  );
}

Examples

Default Alert

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the cli.
  </AlertDescription>
</Alert>

Destructive Alert

<Alert variant="destructive">
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Your session has expired. Please log in again.
  </AlertDescription>
</Alert>

With Icons

import { AlertCircle, Info } from "lucide-react";

<Alert>
  <Info className="h-4 w-4" />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    This is an informational message with an icon.
  </AlertDescription>
</Alert>

<Alert variant="destructive">
  <AlertCircle className="h-4 w-4" />
  <AlertTitle>Warning</AlertTitle>
  <AlertDescription>
    This action cannot be undone. This will permanently delete your account.
  </AlertDescription>
</Alert>

Different Use Cases

// Success Alert
<Alert>
  <CheckCircle className="h-4 w-4" />
  <AlertTitle>Success</AlertTitle>
  <AlertDescription>
    Your changes have been saved successfully.
  </AlertDescription>
</Alert>

// Tip Alert
<Alert>
  <Lightbulb className="h-4 w-4" />
  <AlertTitle>Tip</AlertTitle>
  <AlertDescription>
    You can use keyboard shortcuts to navigate faster.
  </AlertDescription>
</Alert>

// Update Alert
<Alert>
  <Download className="h-4 w-4" />
  <AlertTitle>Update Available</AlertTitle>
  <AlertDescription>
    A new version is available. <Button variant="link">Update now</Button>
  </AlertDescription>
</Alert>

Without Title

<Alert>
  <Megaphone className="h-4 w-4" />
  <AlertDescription>
    New features have been added to the dashboard. Check out the latest updates.
  </AlertDescription>
</Alert>

Custom Styling

<Alert className="border-blue-600 bg-blue-900/20 text-blue-100">
  <Info className="h-4 w-4 text-blue-400" />
  <AlertTitle className="text-blue-300">Custom Blue Alert</AlertTitle>
  <AlertDescription>
    This alert uses custom colors for a unique appearance.
  </AlertDescription>
</Alert>

<Alert className="border-green-600 bg-green-900/20 text-green-100">
  <CheckCircle className="h-4 w-4 text-green-400" />
  <AlertTitle className="text-green-300">Custom Green Alert</AlertTitle>
  <AlertDescription>
    You can customize the appearance by overriding the default classes.
  </AlertDescription>
</Alert>

API Reference

Alert

PropTypeDefaultDescription
variant"default" | "destructive""default"The visual style variant
classNamestring-Additional CSS classes
childrenReactNode-Alert content

AlertTitle

Renders as an <h5> element with title styling. Optional component for alert headers.

AlertDescription

Container for alert content. Supports rich content including links and formatted text.

Source Code

import React from 'react';
import { clsx } from 'clsx';

const Alert = React.forwardRef(({ className, variant = 'default', ...props }, ref) => {
  const variants = {
    default: 'bg-background text-foreground',
    destructive: 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
  };

  return (
    <div
      ref={ref}
      role="alert"
      className={clsx(
        'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
        variants[variant],
        className
      )}
      {...props}
    />
  );
});
Alert.displayName = 'Alert';

const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
  <h5
    ref={ref}
    className={clsx('mb-1 font-medium leading-none tracking-tight', className)}
    {...props}
  />
));
AlertTitle.displayName = 'AlertTitle';

const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={clsx('text-sm [&_p]:leading-relaxed', className)}
    {...props}
  />
));
AlertDescription.displayName = 'AlertDescription';

export { Alert, AlertTitle, AlertDescription };

Accessibility

The Alert component follows accessibility best practices:

  • Uses role="alert" for screen reader announcements
  • Proper heading hierarchy with AlertTitle
  • Good color contrast for readability
  • Icon positioning doesn't interfere with text selection
  • Works well with keyboard navigation

Best Practices

✅ Do

  • Use appropriate variants for message types
  • Include relevant icons to improve comprehension
  • Keep messages concise and actionable
  • Provide clear next steps when applicable
  • Test with screen readers for accessibility

❌ Don't

  • Overuse alerts - they should be for important messages only
  • Make alerts too long or overwhelming
  • Use alerts for regular content or navigation
  • Forget to provide a way to dismiss persistent alerts

Common Patterns

Here are some common patterns for using alerts effectively:

Form Validation

Display validation errors above forms:
{errors.length > 0 && (
  <Alert variant="destructive" className="mb-4">
    <AlertCircle className="h-4 w-4" />
    <AlertTitle>Please fix the following errors:</AlertTitle>
    <AlertDescription>
      <ul className="list-disc list-inside">
        {errors.map((error, index) => (
          <li key={index}>{error}</li>
        ))}
      </ul>
    </AlertDescription>
  </Alert>
)}

Status Updates

Show operation status with appropriate styling:
const getAlertVariant = (status) => {
  switch (status) {
    case 'error': return 'destructive';
    case 'success': return 'default';
    default: return 'default';
  }
};

<Alert variant={getAlertVariant(status)}>
  <AlertTitle>{status === 'success' ? 'Success!' : 'Error'}</AlertTitle>
  <AlertDescription>{message}</AlertDescription>
</Alert>

💡 Pro Tip

Consider using a toast notification system for temporary alerts, and reserve the Alert component for persistent messages that need to remain visible until the user takes action.