Alerts - Notification Components

Modern alert and notification components with various styles, animations, and interactive features. Perfect for user feedback, warnings, errors, and informational messages.

1. Success, Error, Warning, Info Variants

✓
Success!
Your changes have been saved successfully.
✕
Error
Unable to process your request. Please try again.
⚠
Warning
Your session will expire in 5 minutes. Please save your work.
ℹ
Information
A new version of the app is available. Update now for the latest features.
.alert {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  animation: alert-entrance 0.3s ease-out;
}

.alert-success {
  background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%);
  color: #1e4620;
  border-left: 4px solid #43e97b;
}

@keyframes alert-entrance {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2. With Icons (Emoji & Unicode)

🎉
Congratulations! You've completed all tasks.
🚫
Access denied. You don't have permission to view this resource.
💡
Pro tip: Use keyboard shortcuts to work faster!

3. Dismissible Alerts (Checkbox Hack)

Click the × to dismiss

✓
Dismissible Success Alert
Click the × to dismiss this alert.
ℹ
Dismissible Info Alert
This alert can be closed by clicking the × button.
/* Checkbox hack for dismissible alerts */
.alert-close {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.alert-close-label {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.alert-close:checked + .alert {
  animation: alert-exit 0.3s ease-out forwards;
}

@keyframes alert-exit {
  to {
    opacity: 0;
    transform: translateX(100%);
    max-height: 0;
    padding: 0;
    margin: 0;
  }
}

4. Toast Notification Style

✓
Upload Complete
3 files uploaded successfully
.toast {
  position: fixed;
  top: 2rem;
  right: 2rem;
  min-width: 300px;
  max-width: 400px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  animation: toast-entrance 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes toast-entrance {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

5. Banner Alerts

6. Inline vs Floating

Inline Alert

This is some text with an ⚠ inline warning embedded within it.

Floating Alert (Bottom Center)

✓
Changes saved successfully!

7. Solid Style Variants

✓
Success!
Task completed successfully with solid gradient background.
✕
Error
An error occurred with solid gradient background.
ℹ
Information
Here's some information with solid gradient background.

8. Outlined Style Variants

✓
Success
Outlined success alert with border styling.
✕
Error
Outlined error alert with border styling.

9. Alerts with Action Buttons

🔔
New Updates Available
Version 2.0 is now available with new features and improvements.
⚠
Confirm Your Email
We sent a verification email to your inbox. Please verify to continue.
.alert-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.alert-button {
  padding: 0.4rem 1rem;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.alert-button:hover {
  transform: translateY(-1px);
}

10. Loading Alert

⏳
Processing...
Please wait while we process your request.
.alert-loading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.2), transparent);
  animation: loading-bar 1.5s ease-in-out infinite;
}