Alert

A component for displaying contextual feedback messages.

Import

import { Alert } from '@/components/ui';

Basic Usage

<Alert>This is an informational message.</Alert>

Props

Variants

Info (Default)

<Alert variant="info">
  Your account has been updated successfully.
</Alert>

Success

<Alert variant="success">
  Payment processed successfully!
</Alert>

Warning

<Alert variant="warning">
  Your subscription will expire in 7 days.
</Alert>

Danger

<Alert variant="danger">
  There was an error processing your request.
</Alert>

With Title

<Alert variant="success" title="Success!">
  Your changes have been saved successfully.
</Alert>

<Alert variant="danger" title="Error">
  Unable to connect to the server. Please try again later.
</Alert>

Use Cases

Form Validation

{errors.length > 0 && (
  <Alert variant="danger" title="Validation Error">
    <ul className="list-disc list-inside">
      {errors.map((error, i) => (
        <li key={i}>{error}</li>
      ))}
    </ul>
  </Alert>
)}

Feature Announcement

<Alert variant="info" title="New Feature">
  We've added dark mode support! Toggle it in your settings.
</Alert>

Subscription Warning

<Alert variant="warning" title="Action Required">
  Your trial ends in 3 days. <a href="/billing" className="underline">Upgrade now</a> to keep your data.
</Alert>

Error Message

{error && (
  <Alert variant="danger">
    {error.message}
  </Alert>
)}

Complete Example

'use client';
import { useState } from 'react';
import { Alert, Button, Input } from '@/components/ui';

export function ContactForm() {
  const [status, setStatus] = useState(null);

  const handleSubmit = async () => {
    try {
      await sendMessage();
      setStatus({ type: 'success', message: 'Message sent!' });
    } catch (error) {
      setStatus({ type: 'error', message: error.message });
    }
  };

  return (
    <div className="space-y-4">
      {status?.type === 'success' && (
        <Alert variant="success">{status.message}</Alert>
      )}
      {status?.type === 'error' && (
        <Alert variant="danger">{status.message}</Alert>
      )}

      <Input label="Message" />
      <Button onClick={handleSubmit}>Send</Button>
    </div>
  );
}

Color Reference