Vue Toast - Flowbite
Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions
TIP
Original reference: https://flowbite.com/docs/components/toast/
The toast component can be used to enhance your website’s interactivity by pushing notifications to your visitors. You can choose from multiple styles, colors, sizes, and positions and even dismiss the component.
Prop - type
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty"> <!-- default -->
You've unlocked achievement.
</Toast>
<Toast type="warning">
Improve password difficulty.
</Toast>
<Toast type="success">
Item moved successfully.
</Toast>
<Toast type="danger">
Item has been deleted.
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty"> <!-- default -->
You've unlocked achievement.
</Toast>
<Toast type="warning">
Improve password difficulty.
</Toast>
<Toast type="success">
Item moved successfully.
</Toast>
<Toast type="danger">
Item has been deleted.
</Toast>
</template>
You've unlocked achievement.
Improve password difficulty.
Item moved successfully.
Item has been deleted.
Prop - closable
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable>
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable>
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable>
Item has been deleted.
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable>
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable>
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable>
Item has been deleted.
</Toast>
</template>
You've unlocked achievement.
Improve password difficulty.
Item moved successfully.
Item has been deleted.
Prop - divide
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable divide>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable divide>
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable divide>
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable divide>
Item has been deleted.
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable divide>
You've unlocked achievement.
</Toast>
<Toast :type="'warning'" closable divide>
Improve password difficulty.
</Toast>
<Toast :type="'success'" closable divide>
Item moved successfully.
</Toast>
<Toast :type="'danger'" closable divide>
Item has been deleted.
</Toast>
</template>
You've unlocked achievement.
Improve password difficulty.
Item moved successfully.
Item has been deleted.
Message
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
</div>
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
</div>
</Toast>
</template>

Interactive
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
</div>
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<Toast type="empty" closable alignment="start">
<template #icon>
<img class="w-8 h-8 rounded-full shadow-lg" src="https://flowbite.com/docs/images/people/profile-picture-1.jpg" alt="Jese Leos image"/>
</template>
<div class="text-sm font-normal">
<span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Jese Leos</span>
<div class="mb-2 text-sm font-normal">Hi Neil, thanks for sharing your thoughts regarding Flowbite.</div>
<a href="#" class="inline-flex px-2.5 py-1.5 text-xs font-medium text-center text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-800">Reply</a>
</div>
</Toast>
</template>
Update available
A new software version is available for download.
Slot - icon
You can use icon slot for rendering your own icons. Also you can change icon background color by using FlowbiteThemable
vue
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<flowbite-themable theme="blue">
<Toast type="empty" closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-mouse" viewBox="0 0 16 16">
<path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
</svg>
</template>
Scroll down to see more examples.
</Toast>
</flowbite-themable>
<flowbite-themable theme="red">
<Toast closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person-plus" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
<path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</template>
You have new friend request.
</Toast>
</flowbite-themable>
<Toast :type="'success'" closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-earbuds" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"/>
</svg>
</template>
Your airpods connected.
</Toast>
</template>
<script setup>
import { Toast } from 'flowbite-vue'
</script>
<template>
<flowbite-themable theme="blue">
<Toast type="empty" closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-mouse" viewBox="0 0 16 16">
<path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3zm4 8a4 4 0 0 1-8 0V5a4 4 0 1 1 8 0v6zM8 0a5 5 0 0 0-5 5v6a5 5 0 0 0 10 0V5a5 5 0 0 0-5-5z"/>
</svg>
</template>
Scroll down to see more examples.
</Toast>
</flowbite-themable>
<flowbite-themable theme="red">
<Toast closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person-plus" viewBox="0 0 16 16">
<path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H1s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C9.516 10.68 8.289 10 6 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
<path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</template>
You have new friend request.
</Toast>
</flowbite-themable>
<Toast :type="'success'" closable>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-earbuds" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6.825 4.138c.596 2.141-.36 3.593-2.389 4.117a4.432 4.432 0 0 1-2.018.054c-.048-.01.9 2.778 1.522 4.61l.41 1.205a.52.52 0 0 1-.346.659l-.593.19a.548.548 0 0 1-.69-.34L.184 6.99c-.696-2.137.662-4.309 2.564-4.8 2.029-.523 3.402 0 4.076 1.948zm-.868 2.221c.43-.112.561-.993.292-1.969-.269-.975-.836-1.675-1.266-1.563-.43.112-.561.994-.292 1.969.269.975.836 1.675 1.266 1.563zm3.218-2.221c-.596 2.141.36 3.593 2.389 4.117a4.434 4.434 0 0 0 2.018.054c.048-.01-.9 2.778-1.522 4.61l-.41 1.205a.52.52 0 0 0 .346.659l.593.19c.289.092.6-.06.69-.34l2.536-7.643c.696-2.137-.662-4.309-2.564-4.8-2.029-.523-3.402 0-4.076 1.948zm.868 2.221c-.43-.112-.561-.993-.292-1.969.269-.975.836-1.675 1.266-1.563.43.112.561.994.292 1.969-.269.975-.836 1.675-1.266 1.563z"/>
</svg>
</template>
Your airpods connected.
</Toast>
</template>
Scroll down to see more examples.
You have new friend request.
Your airpods connected.