Alerts

Stybber provides simple alert components to display messages to users like success, error, warning, or info.

---

🔔 Basic Alerts

Use utility classes for common alert types:

<div class="alert-success">This is a success alert!</div>
<div class="alert-error">This is an error alert!</div>
<div class="alert-warning">This is a warning alert!</div>
<div class="alert-info">This is an info alert!</div>

🎨 Custom Styled Alerts

You can customize alerts using padding, border, icons, and shadows:

<div class="alert-success p-4 border-l-4 border-green-600 shadow-md">
  ✅ Operation completed successfully.
</div>

🚫 Dismissible Alerts

Add a close button manually using simple HTML and JavaScript:

<div class="alert-warning p-3 relative" id="alertBox">
  ⚠️ Warning: Check your input.
  <button class="absolute top-1 right-2" onclick="document.getElementById('alertBox').remove()">×</button>
</div>

🧠 Tips

• Combine with .flex, .items-center, and .gap-2 for icon + message layout.
• Alerts can be full-width with .w-full or inside containers.