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.
<Alert color="blue" > A simple alert for showing message. </Alert>
The Alert
component comes with 2 different variants that you can change it using the variant
prop.
<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>
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.
<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>
You can add an icon at the beginning of Alert
component using the icon
prop.
<Alert color="blue" > <template #icon> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-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> </template> A simple alert with icon for showing message. </Alert>
The Alert
component is a dismissible component that you can control it using the dismissible
and show
props.
<Alert color="blue" v-model="true" :dismissible="true" > A dismissible alert for showing message. </Alert>
You can modify the open/close state animation for Alert
component using the animate
prop.
<Alert color="blue" v-model="true" :dismissible="true" :animation="true" > A dismissible alert with animation. </Alert>
<Alert v-model="true" color="blue" variant="filled" :dismissible="false" :animation="false" > <template #icon> <span v-html="<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-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> </template> A simple alert for showing message. </Alert>