Tailwind CSS Alert - Taco Svelte

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.

A simple alert for showing message. 
<Alert 
color="blue"
>
A simple alert for showing message.
</Alert>

Alert Variants

The Alert component comes with 2 different variants that you can change it using the variant prop.

A simple filled alert for showing message.
A simple gradient alert for showing message. 
<Alert 
color="blue"
variant="filled"
>
A simple filled alert for showing message.
</Alert>
<Alert 
color="blue"
variant="gradient"
>
A simple gradient alert for showing message.
</Alert>

Alert Colors

The Alert component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

A success alert for showing message.
An info alert for showing message.
An error alert for showing message.
A warning alert for showing message. 
<Alert 
color="green"
>
A success alert for showing message.
</Alert>
<Alert 
color="blue"
>
An info alert for showing message.
</Alert>
<Alert 
color="red"
>
An error alert for showing message.
</Alert>
<Alert 
color="amber"
>
A warning alert for showing message.
</Alert>

Alert with Icon

You can add an icon at the beginning of Alert component using the icon prop.

A simple alert with icon for showing message. 
<Alert  
color="blue" 
>
 <span slot="icon">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="2"
    stroke="currentColor"
    class="h-6 w-6"
  >
  <path
    stroke-linecap="round"
    stroke-linejoin="round"
    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
 </span>
A simple alert with icon for showing message.
</Alert>

Alert Dismissible

The Alert component is a dismissible component that you can control it using the dismissible and show props.

A dismissible alert for showing message. 
<Alert 
color="blue"
show="true"
dismissible
on:closed="dissmisableAlert = false"
>
A dismissible alert for showing message.
</Alert>

Alert Animation

You can modify the open/close state animation for Alert component using the animate prop.

A dismissible alert with animation. 
<Alert 
color="blue"
show="true"
dismissible
animation
on:closed="dissmisableAlertAnimation = false"
>
A dismissible alert with animation.
</Alert>

Customize your Alert

A simple alert for showing message. 
<Alert 
  show="{true}" 
  color="blue" 
  variant="filled" 
  dismissible="{false}" 
  animation="{false}"
>
    <span slot="icon">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </span>
    A simple alert for showing message.
</Alert>