Alerts - Design Guide

Success Alerts

Use success alerts to confirm successful actions or completion of processes.

Successfully saved!

Your task has been created and assigned to the project.

Order completed

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam.

HTML

<div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4" role="alert">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-green-800 dark:text-green-200">
                Successfully saved!
            </h3>
            <div class="mt-2 text-sm text-green-700 dark:text-green-300">
                <p>Your task has been created and assigned to the project.</p>
            </div>
        </div>
    </div>
</div>

Error Alerts

Use error alerts to inform users about problems that require attention or action.

There was an error with your submission

Please check the following fields and try again:

Email address is required
Password must be at least 8 characters

Failed to upload file

The file you selected is too large. Please choose a file smaller than 10MB.

HTML

<div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4" role="alert">
    <div class="flex">
        <div class="flex-shrink-0">
            <svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
            </svg>
        </div>
        <div class="ml-3">
            <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                There was an error with your submission
            </h3>
            <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                <p>Please check the following fields and try again:</p>
                <ul class="list-disc list-inside mt-1 space-y-1">
                    <li>Email address is required</li>
                    <li>Password must be at least 8 characters</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Warning Alerts

Use warning alerts to draw attention to important information that may require user consideration.

Attention needed

Your subscription will expire in 3 days. Please renew to continue using all features.

Storage almost full

You're using 95% of your storage space. Consider upgrading or deleting unused files.

HTML

<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4" role="alert">

<div class="flex"> <div class="flex-shrink-0"> <svg class="h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path> </svg> </div> <div class="ml-3"> <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200"> Attention needed </h3> <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-300"> <p>Your project deadline is approaching in 2 days. Consider reviewing the remaining tasks.</p> </div> </div> </div> </div>

Info Alerts

Use info alerts to provide neutral information or helpful tips to users.

New feature available

You can now assign multiple users to a single task. This feature is available in the task creation form.

Documentation updated

We've updated our API documentation with new examples and best practices. View documentation

HTML

<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4" role="alert">

<div class="flex"> <div class="flex-shrink-0"> <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path> </svg> </div> <div class="ml-3"> <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200"> New feature available </h3> <div class="mt-2 text-sm text-blue-700 dark:text-blue-300"> <p>You can now assign multiple users to a single task. Check out the updated task creation form.</p> </div> </div> </div> </div>

Compact Alerts

Smaller alerts for inline feedback and status messages.

Task completed successfully

Failed to save changes

Connection unstable

2 new messages

HTML

<div class="flex items-center p-3 text-sm text-green-800 dark:text-green-200 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg" role="alert">
    <svg class="flex-shrink-0 w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
    </svg>
    <span class="font-medium">Task completed successfully</span>
</div>

Interactive Examples

Try these interactive alert demonstrations to see behavior in action.

This alert can be dismissed

Click the close button to dismiss this alert.

Usage Guidelines

When to Use

Form submission feedback (success/error)
System status updates
Important notifications
Contextual help and tips

Best Practices

Use appropriate color coding
Include clear, actionable text
Provide dismissal options when appropriate
Auto-dismiss toasts after 3-5 seconds

Accessibility

All alerts are built with accessibility in mind and follow WCAG 2.1 AA guidelines.

Features

role="alert" for screen readers
Proper color contrast ratios
Keyboard navigation support
Focus management

Implementation

<div class="..." role="alert">
  <h3 id="alert-title">Title</h3>
  <p>Description</p>
  <button aria-label="Close alert">
    <span class="sr-only">Close</span>
    <!-- Icon -->
  </button>
</div>