Alert

The Alert component is a flexible notification component that displays important messages to users. It supports multiple color variants, styles, and can include icons for better visual communication.

Overview

The Alert component is designed to provide user feedback and notifications with:

• Multiple color variants for different message types
• Outline and transparent styles
• Optional left and close icons
• Border accent options (left and top)
• Responsive design with dark mode support

Basic Usage

import { Alert } from '@/components/atoms'

function MyComponent() {
  return (
    <Alert className='alert-primary'>
      This is a primary alert message
    </Alert>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	The content to display in the alert
label	string	-	Alternative to children for simple text content
className	string	''	Additional CSS classes
iconLeft	string	-	Icon name for the left side of the alert
iconClose	string	-	Icon name for the close button (right side)

Color Variants

The Alert component supports 8 different color variants:

Primary (Blue)

<Alert className='alert-primary'>This is a primary alert!</Alert>

Secondary (Indigo)

<Alert className='alert-secondary'>This is a secondary alert!</Alert>

Success (Emerald)

<Alert className='alert-success'>This is a success alert!</Alert>

Info (Sky)

<Alert className='alert-info'>This is an info alert!</Alert>

Warning (Amber)

<Alert className='alert-warning'>This is a warning alert!</Alert>

Danger (Rose)

<Alert className='alert-danger'>This is a danger alert!</Alert>

Dark (Slate)

<Alert className='alert-dark'>This is a dark alert!</Alert>

Light (Gray)

<Alert className='alert-light'>This is a light alert!</Alert>

Styles

Default Style

The default style has a solid background color with white text.

<Alert className='alert-primary'>Default primary alert</Alert>

Transparent Style

Add the transparent class for a light background with colored text.

<Alert className='alert-primary transparent'>Transparent primary alert</Alert>

Outline Style

Add the outlined class for a bordered style with colored text.

<Alert className='alert-primary outlined'>Outlined primary alert</Alert>

Icons

Left Icon

Add an icon to the left side of the alert:

<Alert className='alert-primary' iconLeft='lucide:info'>
  Alert with left icon
</Alert>

Close Icon

Add a close icon to the right side:

<Alert className='alert-primary' iconClose='lucide:x'>
  Alert with close icon
</Alert>

Both Icons

Combine both left and close icons:

<Alert 
  className='alert-primary' 
  iconLeft='lucide:info' 
  iconClose='lucide:x'
>
  Alert with both icons
</Alert>

Border Accents

Left Border Accent

Add a colored left border accent:

<Alert className='alert-primary transparent border-left'>
  Alert with left border accent
</Alert>

Top Border Accent

Add a colored top border accent:

<Alert className='alert-primary outlined border-top'>
  Alert with top border accent
</Alert>

Examples

Basic Alerts

<Card>
  <h4>Alert</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary transparent'>This is an alert—check it out!</Alert>
    <Alert className='alert-secondary transparent'>This is a secondary alert!</Alert>
    <Alert className='alert-success transparent'>This is a success alert!</Alert>
    <Alert className='alert-info transparent'>This is an info alert!</Alert>
    <Alert className='alert-warning transparent'>This is a warning alert!</Alert>
    <Alert className='alert-danger transparent'>This is a danger alert!</Alert>
    <Alert className='alert-dark transparent'>This is a dark alert!</Alert>
    <Alert className='alert-light transparent'>This is a light alert!</Alert>
  </div>
</Card>

Outline Alerts

<Card>
  <h4>Outline Alert</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary outlined'>This is an alert—check it out!</Alert>
    <Alert className='alert-secondary outlined'>This is a secondary alert!</Alert>
    <Alert className='alert-success outlined'>This is a success alert!</Alert>
    <Alert className='alert-info outlined'>This is an info alert!</Alert>
    <Alert className='alert-warning outlined'>This is a warning alert!</Alert>
    <Alert className='alert-danger outlined'>This is a danger alert!</Alert>
    <Alert className='alert-dark outlined'>This is a dark alert!</Alert>
    <Alert className='alert-light outlined'>This is a light alert!</Alert>
  </div>
</Card>

Alerts with Icons

<Card>
  <h4>Alert with icons</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an alert—check it out!
    </Alert>
    <Alert className='alert-secondary' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a secondary alert!
    </Alert>
    <Alert className='alert-success' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a success alert!
    </Alert>
    <Alert className='alert-info' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an info alert!
    </Alert>
    <Alert className='alert-warning' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a warning alert!
    </Alert>
    <Alert className='alert-danger' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a danger alert!
    </Alert>
    <Alert className='alert-dark' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a dark alert!
    </Alert>
    <Alert className='alert-light' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a light alert!
    </Alert>
  </div>
</Card>

Outline Alerts with Icons

<Card>
  <h4>Outline Alert with icons</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an alert—check it out!
    </Alert>
    <Alert className='alert-secondary outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a secondary alert!
    </Alert>
    <Alert className='alert-success outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a success alert!
    </Alert>
    <Alert className='alert-info outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an info alert!
    </Alert>
    <Alert className='alert-warning outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a warning alert!
    </Alert>
    <Alert className='alert-danger outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a danger alert!
    </Alert>
    <Alert className='alert-dark outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a dark alert!
    </Alert>
    <Alert className='alert-light outlined' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a light alert!
    </Alert>
  </div>
</Card>

Alerts with Left Border Accent

<Card>
  <h4>Alert with icons and Left Accent</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an alert—check it out!
    </Alert>
    <Alert className='alert-secondary transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a secondary alert!
    </Alert>
    <Alert className='alert-success transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a success alert!
    </Alert>
    <Alert className='alert-info transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an info alert!
    </Alert>
    <Alert className='alert-warning transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a warning alert!
    </Alert>
    <Alert className='alert-danger transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a danger alert!
    </Alert>
    <Alert className='alert-dark transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a dark alert!
    </Alert>
    <Alert className='alert-light transparent border-left' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a light alert!
    </Alert>
  </div>
</Card>

Alerts with Top Border Accent

<Card>
  <h4>Outline Alert with icons and Top Accent</h4>
  <div className='space-x-2 flex flex-col gap-2'>
    <Alert className='alert-primary outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an alert—check it out!
    </Alert>
    <Alert className='alert-secondary outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a secondary alert!
    </Alert>
    <Alert className='alert-success outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a success alert!
    </Alert>
    <Alert className='alert-info outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is an info alert!
    </Alert>
    <Alert className='alert-warning outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a warning alert!
    </Alert>
    <Alert className='alert-danger outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a danger alert!
    </Alert>
    <Alert className='alert-dark outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a dark alert!
    </Alert>
    <Alert className='alert-light outlined border-top' iconLeft='lucide:info' iconClose='lucide:x'>
      This is a light alert!
    </Alert>
  </div>
</Card>

CSS Classes Reference

Base Classes

• .alert - Base alert class with padding, rounded corners, and transitions

Color Variants

• .alert-primary - Blue color scheme
• .alert-secondary - Indigo color scheme
• .alert-success - Emerald color scheme
• .alert-info - Sky color scheme
• .alert-warning - Amber color scheme
• .alert-danger - Rose color scheme
• .alert-dark - Slate color scheme
• .alert-light - Gray color scheme

Style Modifiers

• .transparent - Light background with colored text
• .outlined - Bordered style with colored text
• .border-left - Left border accent (removes border radius)
• .border-top - Top border accent (removes border radius)

Styling

The Alert component uses Tailwind CSS classes and includes:

• Responsive Design: Works on all screen sizes
• Dark Mode Support: Automatic dark mode variants
• Smooth Transitions: 150ms transition duration
• Flexible Layout: Flexbox layout with proper spacing
• Icon Support: Integrated with NavIcon component

Accessibility

The Alert component includes accessibility features:

• Semantic HTML structure
• Proper color contrast ratios
• Icon accessibility (when using NavIcon)
• Keyboard navigation support for close buttons

Best Practices

1. Choose appropriate colors for the message type:

   • Success: Green for positive actions
   • Warning: Yellow/Amber for cautions
   • Danger: Red for errors or destructive actions
   • Info: Blue for informational messages

2. Use icons thoughtfully to enhance message clarity

3. Keep messages concise and actionable

4. Consider using transparent or outlined styles for less intrusive messages

5. Use border accents to draw attention to important alerts

Related Components

• NavIcon - Used for displaying icons in alerts
• Card - Often used as a container for alert examples
• Button - For action buttons within alerts