Alerts

Introduction

Atomix allows you to create alerts, which are useful for displaying important messages on your website. They can be used for various purposes, such as showing error messages, success confirmations, warnings, or notifications.

For example, you can use an alert to display a logout message or a system warning.

---

📢 Creating a Basic Alert

To create an alert, simply add the alert class to a <div>.

Example:

<div class="alert">
  I am an alert!
</div>

This will generate a default-styled alert.

---

🔔 Adding an Icon

You can enhance your alerts by adding an icon inside the <div class="alert">. Icons can be from Remix Icon, FontAwesome, or even an image.

Example (with Remix Icon):

<div class="alert">
  <i class="ri-information-line icon"></i>
  <p class="content">A simple alert with an icon</p>
</div>

Example (with an image):

<div class="alert">
  <img src="your-icon.png" alt="Icon" class="icon">
  <p class="content">An alert with an image icon</p>
</div>

Make sure to add the icon class to your image or icon for proper styling.

---

🎨 Alert Colors

Atomix provides 7 different color variations for alerts.

Type	Class	Example
Primary	(default)	alert
Success	success	alert success
Danger	danger	alert danger
Warning	warning	alert warning
Info	info	alert info
Light	light	alert light
Dark	dark	alert dark

Example:

<div class="alert success">
  <i class="ri-check-line icon"></i>
  <p class="content">Operation completed successfully!</p>
</div>

---

❌ Click to Close (Manual Dismiss)

By default, alerts remain visible unless manually removed. You can make them dismissible by adding the close class and an onclick event.

Example:

<div class="alert close" onclick="this.style.display = 'none';" title="Click to dismiss">
  <img src="your-icon.png" alt="Icon" class="icon">
  <p class="content">An alert with an icon and a close function <br>Click to close</p>
</div>

This allows users to click the alert to close it.

If you prefer automatic dismissing, you can use JavaScript to hide the alert after a few seconds.

---

📏 Alert Size & Behavior

• Alerts automatically adjust their height based on their content.

• If the text is longer than the icon, the icon will be vertically centered.

• If the icon is taller than the text, the text will be aligned accordingly.

• To insert a line break, you can use <br>, but avoid excessive use as it's considered bad practice.