Alerts

Alert styles and variants used to notify users of important events.

Basic Alerts

This is a simple alert

	

	
	<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

		<div role="alert" class="p-4 font-medium bg-primary rounded-lg text-white mb-3">
			This is a simple alert
		</div>

		<div role="alert" class="p-4 font-medium bg-dark rounded-lg text-white mb-3">
			This is a simple alert
		</div>

		<div role="alert" class="p-4 font-medium bg-warning rounded-lg text-white mb-3">
			This is a simple alert
		</div>

		<div role="alert" class="p-4 font-medium bg-info rounded-lg text-white mb-3">
			This is a simple alert
		</div>

		<div role="alert" class="p-4 font-medium bg-success rounded-lg text-white mb-3">
			This is a simple alert
		</div>

		<div role="alert" class="p-4 font-medium bg-danger rounded-lg text-white">
			This is a simple alert
		</div>

	</div>

Ghost Alerts

This is a simple primary alert

This is a simple light alert

This is a simple warning alert

This is a simple info alert

This is a simple success alert

This is a simple error alert

	

	
	<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

		<div role="alert" class="p-4 font-medium bg-primary-transparent rounded-lg text-primary mb-3">
			This is a simple primary alert
		</div>

		<div role="alert" class="p-4 font-medium bg-gray-transparent rounded-lg text-dark mb-3">
			This is a simple light alert
		</div>

		<div role="alert" class="p-4 font-medium bg-warning-transparent rounded-lg text-warning mb-3">
			This is a simple warning alert
		</div>

		<div role="alert" class="p-4 font-medium bg-info-transparent rounded-lg text-info mb-3">
			This is a simple info alert
		</div>

		<div role="alert" class="p-4 font-medium bg-success-transparent rounded-lg text-success mb-3">
			This is a simple success alert
		</div>

		<div role="alert" class="p-4 font-medium bg-danger-transparent rounded-lg text-danger">
			This is a simple error alert
		</div>

	</div>

Outline Alerts

This is a simple primary alert

This is a simple dark alert

This is a simple warning alert

This is a simple info alert

This is a simple success alert

This is a simple error alert

	

	
	<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

		<div role="alert" class="p-4 font-medium border border-primary rounded-lg text-primary mb-3">
			This is a simple primary alert
		</div>

		<div role="alert" class="p-4 font-medium border border-border-color rounded-lg text-dark mb-3">
			This is a simple dark alert
		</div>

		<div role="alert" class="p-4 font-medium border border-warning rounded-lg text-warning mb-3">
			This is a simple warning alert
		</div>

		<div role="alert" class="p-4 font-medium border border-info rounded-lg text-info mb-3">
			This is a simple info alert
		</div>

		<div role="alert" class="p-4 font-medium border border-success rounded-lg text-success mb-3">
			This is a simple success alert
		</div>

		<div role="alert" class="p-4 font-medium border border-danger rounded-lg text-danger">
			This is a simple error  alert
		</div>

	</div>

Alerts with Icons

This is a primary alert

This is a light alert

This is a warning alert

This is a info alert

This is a success alert

This is a error alert

	

	
	<div class="border-dashed border-primary border px-4.5 py-5 rounded-md">

		<div role="alert" class="flex items-center p-4 font-medium bg-primary-transparent rounded-lg text-primary mb-3">
			<i class="icon-info me-1"></i>This is a primary alert
		</div>

		<div role="alert" class="flex items-center p-4 font-medium bg-gray-transparent rounded-lg text-dark mb-3">
			<i class="icon-copy-check me-1"></i>This is a light alert
		</div>

		<div role="alert" class="flex items-center p-4 font-medium bg-warning-transparent rounded-lg text-warning mb-3">
			<i class="icon-triangle-alert me-1"></i>This is a  warning alert
		</div>

		<div role="alert" class="flex items-center p-4 font-medium bg-info-transparent rounded-lg text-info mb-3">
			<i class="icon-badge-info me-1"></i>This is a info alert
		</div>

		<div role="alert" class="flex items-center p-4 font-medium bg-success-transparent rounded-lg text-success mb-3">
			<i class="icon-badge-check me-1"></i>This is a success alert
		</div>

		<div role="alert" class="flex items-center p-4 font-medium bg-danger-transparent rounded-lg text-danger">
			<i class="icon-octagon-alert me-1"></i>This is a error alert
		</div>

	</div>

Alert with List

There were 2 errors with your submission

Your password must be at least 8 characters
Your password must include at least one special Character

	

	
	<div class="p-4 bg-danger-transparent rounded-lg">
		<p class="text-danger flex items-center font-medium mb-2.5">
			<i class="icon-octagon-alert me-1"></i>
			There were 2 errors with your submission
		</p> 
		<ul>
			<li class="text-danger">Your password must be at least 8 characters</li>
			<li class="text-danger">Your password must include at least one special Character</li>
		</ul>
	</div>

Alert with Actions

There were 2 success with your submission

Your password must be at least 8 characters
Your password must include at least one special Character

	

	
	<div class="p-4 bg-success-transparent rounded-lg">
		<p class="text-success flex items-center font-medium mb-2.5">
		<i class="icon-octagon-alert me-1"></i>
			There were 2 success with your submission
		</p> 
		<ul>
			<li class="text-success">Your password must be at least 8 characters</li>
			<li class="text-success">Your password must include at least one special Character</li>
		</ul>
	</div>

<div class="border-dashed border-primary border px-4.5 py-5 rounded-md"> <div role="alert" class="p-4 font-medium bg-primary rounded-lg text-white mb-3"> This is a simple alert </div> <div role="alert" class="p-4 font-medium bg-dark rounded-lg text-white mb-3"> This is a simple alert </div> <div role="alert" class="p-4 font-medium bg-warning rounded-lg text-white mb-3"> This is a simple alert </div> <div role="alert" class="p-4 font-medium bg-info rounded-lg text-white mb-3"> This is a simple alert </div> <div role="alert" class="p-4 font-medium bg-success rounded-lg text-white mb-3"> This is a simple alert </div> <div role="alert" class="p-4 font-medium bg-danger rounded-lg text-white"> This is a simple alert </div> </div>

<div class="border-dashed border-primary border px-4.5 py-5 rounded-md"> <div role="alert" class="p-4 font-medium bg-primary-transparent rounded-lg text-primary mb-3"> This is a simple primary alert </div> <div role="alert" class="p-4 font-medium bg-gray-transparent rounded-lg text-dark mb-3"> This is a simple light alert </div> <div role="alert" class="p-4 font-medium bg-warning-transparent rounded-lg text-warning mb-3"> This is a simple warning alert </div> <div role="alert" class="p-4 font-medium bg-info-transparent rounded-lg text-info mb-3"> This is a simple info alert </div> <div role="alert" class="p-4 font-medium bg-success-transparent rounded-lg text-success mb-3"> This is a simple success alert </div> <div role="alert" class="p-4 font-medium bg-danger-transparent rounded-lg text-danger"> This is a simple error alert </div> </div>

<div class="border-dashed border-primary border px-4.5 py-5 rounded-md"> <div role="alert" class="p-4 font-medium border border-primary rounded-lg text-primary mb-3"> This is a simple primary alert </div> <div role="alert" class="p-4 font-medium border border-border-color rounded-lg text-dark mb-3"> This is a simple dark alert </div> <div role="alert" class="p-4 font-medium border border-warning rounded-lg text-warning mb-3"> This is a simple warning alert </div> <div role="alert" class="p-4 font-medium border border-info rounded-lg text-info mb-3"> This is a simple info alert </div> <div role="alert" class="p-4 font-medium border border-success rounded-lg text-success mb-3"> This is a simple success alert </div> <div role="alert" class="p-4 font-medium border border-danger rounded-lg text-danger"> This is a simple error alert </div> </div>

<div class="border-dashed border-primary border px-4.5 py-5 rounded-md"> <div role="alert" class="flex items-center p-4 font-medium bg-primary-transparent rounded-lg text-primary mb-3"> <i class="icon-info me-1"></i>This is a primary alert </div> <div role="alert" class="flex items-center p-4 font-medium bg-gray-transparent rounded-lg text-dark mb-3"> <i class="icon-copy-check me-1"></i>This is a light alert </div> <div role="alert" class="flex items-center p-4 font-medium bg-warning-transparent rounded-lg text-warning mb-3"> <i class="icon-triangle-alert me-1"></i>This is a warning alert </div> <div role="alert" class="flex items-center p-4 font-medium bg-info-transparent rounded-lg text-info mb-3"> <i class="icon-badge-info me-1"></i>This is a info alert </div> <div role="alert" class="flex items-center p-4 font-medium bg-success-transparent rounded-lg text-success mb-3"> <i class="icon-badge-check me-1"></i>This is a success alert </div> <div role="alert" class="flex items-center p-4 font-medium bg-danger-transparent rounded-lg text-danger"> <i class="icon-octagon-alert me-1"></i>This is a error alert </div> </div>

<div class="p-4 bg-danger-transparent rounded-lg"> <p class="text-danger flex items-center font-medium mb-2.5"> <i class="icon-octagon-alert me-1"></i> There were 2 errors with your submission </p> <ul> <li class="text-danger">Your password must be at least 8 characters</li> <li class="text-danger">Your password must include at least one special Character</li> </ul> </div>

<div class="p-4 bg-success-transparent rounded-lg"> <p class="text-success flex items-center font-medium mb-2.5"> <i class="icon-octagon-alert me-1"></i> There were 2 success with your submission </p> <ul> <li class="text-success">Your password must be at least 8 characters</li> <li class="text-success">Your password must include at least one special Character</li> </ul> </div>