Alerts

An alert is a simple component which allows you to display messages to your users.

Basic alerts#

The Axentix alert is a simple component made using only our utilities classes. You can create dynamic and modern alerts using the toasts.
Creating simple alerts is easy using our utilities classes. Here are some examples you can use :

This is an informative alert
This is a success alert
This is a warning alert
This is an error alert
<div class="p-3 my-2 rounded-1 blue light-4 text-blue text-dark-3">This is an informative alert</div>
<div class="p-3 my-2 rounded-1 green light-4 text-green text-dark-4">This is a success alert</div>
<div class="p-3 my-2 rounded-1 yellow light-4 text-yellow text-dark-4">This is a warning alert</div>
<div class="p-3 my-2 rounded-1 red light-4 text-red text-dark-4">This is an error alert</div>

Bordered alerts#

You can create more detailed alerts using border classes. Here are more examples :

This is an informative alert
This is a success alert
This is a warning alert
This is an error alert
<div class="p-3 my-2 rounded-1 blue light-4 text-blue text-dark-3 bd-solid bd-blue bd-light-1 bd-1">This is an informative alert</div>
<div class="p-3 my-2 rounded-1 green light-4 text-green text-dark-4 bd-solid bd-green bd-dark-1 bd-1">This is a success alert</div>
<div class="p-3 my-2 rounded-1 yellow light-4 text-yellow text-dark-4 bd-solid bd-yellow bd-dark-1 bd-1">This is a warning alert</div>
<div class="p-3 my-2 rounded-1 red light-4 text-red text-dark-4 bd-solid bd-red bd-1">This is an error alert</div>

Alerts with icons#

You can use icons to make your alerts more understandable for your users.
To get icons, you can use the icon provider of your choice. We are using Iconify.

This is an informative alert
This is a success alert
This is a warning alert
This is an error alert 
<div class="p-3 my-2 rounded-1 blue light-4 text-blue text-dark-3 bd-solid bd-blue bd-light-1 bd-1">
  <span class="iconify-inline" data-icon="mdi:information"></span> This is an informative alert
</div>

<div class="p-3 my-2 rounded-1 green light-4 text-green text-dark-4 bd-solid bd-green bd-dark-1 bd-1">
  <span class="iconify-inline" data-icon="mdi:check-bold"></span> This is a success alert
</div>

<div class="p-3 my-2 rounded-1 yellow light-4 text-yellow text-dark-4 bd-solid bd-yellow bd-dark-1 bd-1">
  <span class="iconify-inline" data-icon="mdi:alert"></span> This is a warning alert
</div>

<div class="p-3 my-2 rounded-1 red light-4 text-red text-dark-4 bd-solid bd-red bd-1">
  <span class="iconify-inline" data-icon="mdi:alert-octagon"></span> This is an error alert
</div>