Note : in this version of package we are using Tailwind css v3
Step 1 - Create an anonymous blade component
Create a new file called easyAlert.blade.php
in side /views/components
and add the following content to the file
<div class="debug fixed top-16 right-6 space-y-4 p-4 overflow-hidden pointer-events-none" id="easy-alert-box">
{{-- success --}}
@if (session()->has("success"))
<div class="easy-alert relative bg-green-50 border border-green-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
id="easy-alert-success">
<div class="flex gap-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-green-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h2 class="font-semibold leading-none text-green-800">Succussful!</h2>
<p class="text-muted text-sm mt-2 text-green-700">{{ session('success') }}</p>
</div>
</div>
<div class="absolute top-3 right-3">
<button type="button" onclick="closeAlert('easy-alert-success')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
@endif
{{-- /success --}}
{{-- info --}}
@if (session()->has("info"))
<div class="easy-alert relative bg-blue-50 border border-blue-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
id="easy-alert-info">
<div class="flex gap-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h2 class="font-semibold leading-none text-blue-800">Information!</h2>
<p class="text-muted text-sm mt-2 text-blue-700">{{ session('info') }}</p>
</div>
</div>
<div class="absolute top-3 right-3">
<button type="button" onclick="closeAlert('easy-alert-info')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
@endif
{{-- /info --}}
{{-- warning --}}
@if (session()->has("warning"))
<div class="easy-alert relative bg-yellow-50 border border-yellow-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
id="easy-alert-warning">
<div class="flex gap-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
</div>
<div>
<h2 class="font-semibold leading-none text-yellow-800">Attention needed!</h2>
<p class="text-muted text-sm mt-2 text-yellow-700">{{ session('warning') }}</p>
</div>
</div>
<div class="absolute top-3 right-3">
<button type="button" onclick="closeAlert('easy-alert-warning')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
@endif
{{-- /warning --}}
{{-- danger --}}
@if (session()->has("danger"))
<div class="easy-alert relative bg-red-50 border border-red-100 rounded-lg shadow-lg p-4 w-[320px] pointer-events-auto"
id="easy-alert-danger">
<div class="flex gap-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h2 class="font-semibold leading-none text-red-800">Error!</h2>
<p class="text-muted text-sm mt-2 text-red-700">{{ session('danger') }}</p>
</div>
</div>
<div class="absolute top-3 right-3">
<button type="button" onclick="closeAlert('easy-alert-danger')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
@endif
{{-- /danger --}}
{{-- errors --}}
@if ($errors->any())
<div class="easy-alert relative bg-red-50 border border-red-100 rounded-lg shadow-lg p-4 min-w-[320px] pointer-events-auto pr-12"
id="easy-alert-errors">
<div class="flex gap-4">
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<div>
<h2 class="font-semibold leading-none mb-2 text-red-800">There were {{ count($errors->all()) }} errors
with you submission</h2>
<ul class="list-inside list-disc">
@foreach ($errors->all() as $error)
<li class="list-item text-sm text-red-700">{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
<div class="absolute top-3 right-3">
<button type="button" onclick="closeAlert('easy-alert-errors')">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-800" viewBox="0 0 20 20"
fill="currentColor">
<path fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
@endif
{{-- /errors --}}
<script>
function closeAlert($id) {
document.getElementById($id).classList.add('close');
}
</script>
</div>
😵
Step 2 - Adding easy-alert animation
Make an easy-alert.css
file add the following content and import it into your layout or main blade file.
.easy-alert {
-webkit-animation: slide-in-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: slide-in-right 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.easy-alert.close {
-webkit-animation: fade-out-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: fade-out-right 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
/* animation */
@-webkit-keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-in-right {
0% {
-webkit-transform: translateX(1000px);
transform: translateX(1000px);
opacity: 0;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
}
@-webkit-keyframes fade-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
display: none;
visibility: hidden;
}
}
@keyframes fade-out-right {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
100% {
-webkit-transform: translateX(50px);
transform: translateX(50px);
opacity: 0;
display: none;
visibility: hidden;
}
}
#layouts/app.blade.php
...
<!-- easy-alert-styles -->
<link rel="stylesheet" href="{{ asset('css/easy-alert.css') }}">
...
Step 3 - Use easyAlert
Component in layout
#layouts/app.blade.php
...
<!-- Page Content -->
<main>
...
<!-- easyAlert -->
<x-easyAlert />
<!-- /easyAlert -->
...
</main>
...
Step 4 - Start Using Laravel easyAlert
public function store(Request $request){
...
session()->flash("success", "New Tag Created");
return back();
}
//output
//validation errors
Conclusion
In this tutorial, I'll show you how to add a simple and customizable alert system called Laravel easyAlert.