The alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions. Below we are presenting a dynamic example of the Alert component that you can use in your Taco project.
<x-alert>Alert primary</x-alert>
Use this example to create a simple and versatile alert component.
<x-alert color="bg-blue-500">An info alert for showing message.</x-alert>
<x-alert color="bg-red-500">An error alert for showing message.</x-alert>
<x-alert color="bg-green-500">A success alert for showing message.</x-alert>
<x-alert color="bg-orange-500">A warning alert for showing message.</x-alert>
Use this example to create a beautiful alert with gradients.
<x-alert color="bg-gradient-to-tr from-blue-600 to-blue-400">An info alert for showing message.</x-alert>
<x-alert color="bg-gradient-to-tr from-red-600 to-red-400">An error alert for showing message.</x-alert>
<x-alert color="bg-gradient-to-tr from-green-600 to-green-400">A success alert for showing message.</x-alert>
<x-alert color="bg-gradient-to-tr from-orange-600 to-orange-400">A warning alert for showing message.</x-alert>