Alert

The Alert component provides a way to display important messages or notifications to users. It comes with several visual variants to denote different types of alerts: warning, error, success, and info. This component is designed to provide contextual feedback and capture the user’s attention when necessary.

Description

A component that displays a box with an optional title and content to call attention to important information.

Usage

import { Alert } from "@crafted-ui/react";

<Alert title="Error Alert" status="error">
  Something went wrong. Please try again.
</Alert>

Props

The Alert component accepts the following props:

Prop	Type	Default	Description
title	string	required	The heading text for the alert
status	’warning’ | ‘error’ | ‘success’ | ‘info'	'warning’	Determines the visual style of the alert
className	string	undefined	Additional CSS class names
children	ReactNode	undefined	Content of the alert

Warning (Default)

Used for warnings or cautionary information that requires the user’s attention.

<Alert title="Warning Alert">
  Please be aware of these important details.
</Alert>

Error

Used to communicate error states or failures that need immediate attention.

<Alert title="Error Alert" status="error">
  An error occurred while processing your request.
</Alert>

Success

Used to confirm successful actions or operations.

<Alert title="Success Alert" status="success">
  Your profile has been updated successfully.
</Alert>

Info

Used for general information or announcements.

<Alert title="Info Alert" status="info">
  A new feature has been added to the platform.
</Alert>

The Alert component follows accessibility best practices:

• Uses semantic HTML for structure
• Employs color schemes that maintain sufficient contrast for visibility
• Uses the Heading5 component for the title to maintain proper heading hierarchy

When implementing alerts, ensure that:

1. Alert content is clear and concise
2. Critical alerts (especially errors) provide actionable information
3. Avoid using too many alerts on a single page to prevent alert fatigue

Basic Alert

<Alert title="No data available">
  Please check back later.
</Alert>

Alert with List Content

<Alert title="Validation Errors" status="error">
  <ul>
    <li>Username is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</Alert>

Alert with Custom Content

<Alert title="Account Status" status="info">
  <div className="flex gap-2 items-center">
    <span className="font-medium">Current Plan:</span>
    <span>Professional</span>
  </div>
  <div className="text-sm text-gray-600">Renews on June 1, 2025</div>
</Alert>