From 4cca3e63cfd03a96a7d89339cb5b12b4b54fe03d Mon Sep 17 00:00:00 2001
From: Alexandr <a.pashkevich22@gmail.com>
Date: Tue, 26 Jul 2022 19:13:30 +0300
Subject: [PATCH] feat: toast component

---
 README.md                                     |  16 +-
 docs/.vitepress/config.ts                     |   2 +-
 .../toast/examples/ToastClosableExample.vue   |  19 +++
 .../toast/examples/ToastDivideExample.vue     |  19 +++
 .../toast/examples/ToastIconExample.vue       |  36 ++++
 .../examples/ToastInteractiveExample.vue      |  20 +++
 .../toast/examples/ToastMessageExample.vue    |  15 ++
 ...{ToastExample.vue => ToastTypeExample.vue} |   5 +-
 docs/components/toast/toast.md                | 159 +++++++++++++++++-
 src/components/Button/Button.vue              |   7 +-
 src/components/Toast/Toast.vue                |  51 ++++--
 .../Toast/composables/useToastClasses.ts      |  29 ++++
 src/components/Toast/types.ts                 |   1 +
 .../FlowbiteThemableChild.vue                 |   7 +-
 .../useFlowbiteThemableChildClasses.ts        |   4 +-
 .../composables/useFlowbiteThemable.ts        |  30 ++--
 16 files changed, 382 insertions(+), 38 deletions(-)
 create mode 100644 docs/components/toast/examples/ToastClosableExample.vue
 create mode 100644 docs/components/toast/examples/ToastDivideExample.vue
 create mode 100644 docs/components/toast/examples/ToastIconExample.vue
 create mode 100644 docs/components/toast/examples/ToastInteractiveExample.vue
 create mode 100644 docs/components/toast/examples/ToastMessageExample.vue
 rename docs/components/toast/examples/{ToastExample.vue => ToastTypeExample.vue} (70%)

diff --git a/README.md b/README.md
index a195326..9736ccb 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/alert/alert.html">
+        <a href="https://flowbite-vue.com/components/alert/alert.html">
             <img alt="Tailwind CSS Alerts" src="https://flowbite.s3.amazonaws.com/github/alerts.jpg">
         </a>
     </td>
@@ -111,12 +111,12 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/button/button.html">
+        <a href="https://flowbite-vue.com/components/button/button.html">
             <img alt="Tailwind CSS Buttons" src="https://flowbite.s3.amazonaws.com/github/buttons.jpg">
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/buttonGroup/buttonGroup.html">
+        <a href="https://flowbite-vue.com/components/buttonGroup/buttonGroup.html">
             <img alt="Tailwind CSS Button Group" src="https://flowbite.s3.amazonaws.com/github/button-group.jpg">
         </a>
     </td>
@@ -133,7 +133,7 @@ module.exports = {
   </tr>
   <tr>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/dropdown/dropdown.html">
+        <a href="https://flowbite-vue.com/components/dropdown/dropdown.html">
             <img alt="Tailwind CSS Dropdown" src="https://flowbite.s3.amazonaws.com/github/dropdown.jpg">
         </a>
     </td>
@@ -143,7 +143,7 @@ module.exports = {
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/listGroup/listGroup.html">
+        <a href="https://flowbite-vue.com/components/listGroup/listGroup.html">
             <img alt="Tailwind CSS List group" src="https://flowbite.s3.amazonaws.com/github/list-group.jpg">
         </a>
     </td>
@@ -165,7 +165,7 @@ module.exports = {
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-vue.com/guide/tabs/tabs.html">
+        <a href="https://flowbite-vue.com/components/tabs/tabs.html">
             <img alt="Tailwind CSS Tabs" src="https://flowbite.s3.amazonaws.com/github/tabs.jpg">
         </a>
     </td>
@@ -195,7 +195,7 @@ module.exports = {
   <tr>
     <td width="33.3333%">:construction: Progress bar</td>
     <td width="33.3333%">:construction: Tables</td>
-    <td width="33.3333%">:construction: Toast</td>
+    <td width="33.3333%">Toast</td>
   </tr>
   <tr>
     <td width="33.3333%">
@@ -209,7 +209,7 @@ module.exports = {
         </a>
     </td>
     <td width="33.3333%">
-        <a href="https://flowbite-react.com/toast/">
+        <a href="https://flowbite-vue.com/components/alert/alert.html">
             <img alt="Tailwind CSS Toast" src="https://flowbite.s3.amazonaws.com/github/toast.jpg">
         </a>
     </td>
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 8818810..d686abb 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -34,6 +34,7 @@ function getComponents() {
     { text: 'Spinner', link: '/components/spinner/spinner.md' },
     { text: 'Tabs', link: '/components/tabs/tabs.md' },
     { text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
+    { text: 'Toast', link: 'components/toast/toast.md' },
 
     { text: '- Accordion', link: 'components/accordion/accordion.md' },
     { text: '- Avatar', link: 'components/avatar/avatar.md' },
@@ -50,7 +51,6 @@ function getComponents() {
     { text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
     { text: '- Table', link: 'components/table/table.md' },
     { text: '- Timeline', link: 'components/timeline/timeline.md' },
-    { text: '- Toast', link: 'components/toast/toast.md' },
     { text: '- Tooltip', link: 'components/tooltip/tooltip.md' },
   ]
 }
diff --git a/docs/components/toast/examples/ToastClosableExample.vue b/docs/components/toast/examples/ToastClosableExample.vue
new file mode 100644
index 0000000..9c34729
--- /dev/null
+++ b/docs/components/toast/examples/ToastClosableExample.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <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>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastDivideExample.vue b/docs/components/toast/examples/ToastDivideExample.vue
new file mode 100644
index 0000000..18cfdd1
--- /dev/null
+++ b/docs/components/toast/examples/ToastDivideExample.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <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>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastIconExample.vue b/docs/components/toast/examples/ToastIconExample.vue
new file mode 100644
index 0000000..9ab3f81
--- /dev/null
+++ b/docs/components/toast/examples/ToastIconExample.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <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>
+  </div>
+</template>
+<script setup>
+import { Toast, FlowbiteThemable } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastInteractiveExample.vue b/docs/components/toast/examples/ToastInteractiveExample.vue
new file mode 100644
index 0000000..a26f486
--- /dev/null
+++ b/docs/components/toast/examples/ToastInteractiveExample.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <flowbite-themable :theme="'blue'">
+      <Toast type="empty" closable alignment="start">
+        <template #icon>
+          <svg aria-hidden="true" class="w-5 h-5" fill="#ffff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z" clip-rule="evenodd"></path></svg>
+        </template>
+        <span class="mb-1 text-sm font-semibold text-gray-900 dark:text-white">Update available</span>
+        <div class="mb-2 text-sm font-normal">A new software version is available for download.</div>
+        <div class="grid grid-cols-2 gap-2">
+          <Button size="xs">Update</Button>
+          <Button size="xs" :color="'alternative'">Not now</Button>
+        </div>
+      </Toast>
+    </flowbite-themable>
+  </div>
+</template>
+<script setup>
+import { Toast, FlowbiteThemable, Button } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastMessageExample.vue b/docs/components/toast/examples/ToastMessageExample.vue
new file mode 100644
index 0000000..52a67be
--- /dev/null
+++ b/docs/components/toast/examples/ToastMessageExample.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <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>
+      <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>
+    </Toast>
+  </div>
+</template>
+<script setup>
+import { Toast } from '../../../../src/index'
+</script>
diff --git a/docs/components/toast/examples/ToastExample.vue b/docs/components/toast/examples/ToastTypeExample.vue
similarity index 70%
rename from docs/components/toast/examples/ToastExample.vue
rename to docs/components/toast/examples/ToastTypeExample.vue
index 91f1323..3ff32ed 100644
--- a/docs/components/toast/examples/ToastExample.vue
+++ b/docs/components/toast/examples/ToastTypeExample.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="vp-raw flex align-center gap-2 flex-wrap">
+  <div class="vp-raw flex align-center gap-2 flex-wrap flex-col">
+    <Toast type="empty">
+      You've unlocked achievement.
+    </Toast>
     <Toast :type="'warning'">
       Improve password difficulty.
     </Toast>
diff --git a/docs/components/toast/toast.md b/docs/components/toast/toast.md
index 76ac26f..b806a4f 100644
--- a/docs/components/toast/toast.md
+++ b/docs/components/toast/toast.md
@@ -1,13 +1,33 @@
 <script setup>
-import ToastExample from './examples/ToastExample.vue'
+import ToastTypeExample from './examples/ToastTypeExample.vue';
+import ToastClosableExample from './examples/ToastClosableExample.vue';
+import ToastIconExample from './examples/ToastIconExample.vue';
+import ToastDivideExample from './examples/ToastDivideExample.vue';
+import ToastMessageExample from './examples/ToastMessageExample.vue';
+import ToastInteractiveExample from './examples/ToastInteractiveExample.vue'
 </script>
 # Toast
 
+#### 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/](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>
@@ -20,4 +40,139 @@ import { Toast } from 'flowbite-vue'
 </template>
 ```
 
-<ToastExample />
+<ToastTypeExample />
+
+## 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>
+```
+
+<ToastClosableExample />
+
+## 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>
+```
+
+<ToastDivideExample />
+
+## 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>
+```
+
+<ToastMessageExample />
+
+## 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>
+```
+
+<ToastInteractiveExample />
+
+## Slot - icon
+
+You can use icon slot for rendering your own icons. Also you can change icon background color by using [FlowbiteThemable](/components/flowbiteThemable/flowbiteThemable.md)
+
+```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>
+```
+
+<ToastIconExample />
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
index c8c3608..f466be0 100644
--- a/src/components/Button/Button.vue
+++ b/src/components/Button/Button.vue
@@ -1,5 +1,5 @@
 <template>
-  <flowbite-themable-child tag="button" :apply="['background', 'hover', 'focus']" :class="wrapperClasses" :disabled="disabled">
+  <flowbite-themable-child tag="button" :apply="appliableTheme" :class="wrapperClasses" :disabled="disabled">
     <div v-if="!isOutlineGradient && ($slots.prefix || loadingPrefix)" class="mr-2"> <!--automatically add mr class if slot provided or loading -->
       <spinner :color="spinnerColor" :size="spinnerSize" v-if="loadingPrefix" />
       <slot name="prefix" v-else />
@@ -85,4 +85,9 @@ const loadingSuffix = computed(() => props.loading && props.loadingPosition ===
 const { wrapperClasses, spanClasses } = useButtonClasses(toRefs(props))
 const { color: spinnerColor, size: spinnerSize } = useButtonSpinner(toRefs(props))
 
+const appliableTheme = computed(() => {
+  if(['alternative', 'light'].includes(props.color)) return []
+  return ['background', 'hover', 'focus']
+})
+
 </script>
diff --git a/src/components/Toast/Toast.vue b/src/components/Toast/Toast.vue
index 7000cc9..2653108 100644
--- a/src/components/Toast/Toast.vue
+++ b/src/components/Toast/Toast.vue
@@ -1,32 +1,63 @@
 <template>
-  <div id="toast-default" class="flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
-    <div v-if="type !== 'empty'" :class="['inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg', typeClasses]">
-      <svg v-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
+  <div v-if="visible" id="toast-default" :class="wrapperClasses" role="alert" >
+    <flowbite-themable-child
+        v-if="type !== 'empty' || $slots.icon"
+        :class="[
+            'inline-flex flex-shrink-0 justify-center items-center w-8 h-8 rounded-lg',
+             typeClasses
+        ]"
+        :apply="['background', 'text']"
+    >
+      <slot v-if="$slots.icon" :class="{ 'ml-3': type !== 'empty' }" name="icon" />
+      <svg v-else-if="type === 'success'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
       <svg v-else-if="type === 'danger'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
-      <svg v-else-if="type === 'warning'" aria-hidden="true" class="text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
-    </div>
-    <div class="ml-3 text-sm font-normal">
+      <svg v-else-if="type === 'warning'" aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
+    </flowbite-themable-child>
+    <div :class="[contentClasses, { 'ml-3': $slots.icon || type !== 'empty' }]">
       <slot />
     </div>
-    <button type="button" class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target="#toast-default" aria-label="Close">
+    <button @click="onClose" v-if="closable" type="button" class="border-none ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" aria-label="Close">
       <span class="sr-only">Close</span>
       <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
     </button>
   </div>
 </template>
 <script lang="ts" setup>
-import type { ToastPreset } from '@/components/Toast/types'
+import type { ToastAlign, ToastPreset } from '@/components/Toast/types'
 import type { PropType } from 'vue'
 import { useToastClasses } from './composables/useToastClasses'
-import { toRefs } from 'vue'
+import { ref, toRefs } from 'vue'
+import FlowbiteThemableChild
+  from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
 
 const props = defineProps({
   type: {
     type: String as PropType<ToastPreset>,
     default: 'empty',
   },
+  alignment: {
+    type: String as PropType<ToastAlign>,
+    default: 'center',
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  divide: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const { typeClasses } = useToastClasses(toRefs(props))
+const visible = ref(true)
+
+const emit = defineEmits(['close'])
+
+const { typeClasses, wrapperClasses, contentClasses } = useToastClasses(toRefs(props))
+
+const onClose = () => {
+  emit('close')
+  visible.value = false
+}
 
 </script>
diff --git a/src/components/Toast/composables/useToastClasses.ts b/src/components/Toast/composables/useToastClasses.ts
index 42c47db..9e03740 100644
--- a/src/components/Toast/composables/useToastClasses.ts
+++ b/src/components/Toast/composables/useToastClasses.ts
@@ -1,13 +1,19 @@
 import type { Ref } from 'vue'
 import { computed } from 'vue'
 import type { ToastPreset } from '@/components/Toast/types'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import type { ToastAlign } from '@/components/Toast/types'
 
 type UseToastClassesReturns = {
     typeClasses: Ref<string>
+    wrapperClasses: Ref<string>
+    contentClasses: Ref<string>
 }
 
 type UseToastClassesProps = {
     type: Ref<ToastPreset>
+    divide: Ref<boolean>
+    alignment: Ref<ToastAlign>
 }
 
 const typeClassesMap: Record<ToastPreset, string> = {
@@ -17,13 +23,36 @@ const typeClassesMap: Record<ToastPreset, string> = {
     warning: 'text-orange-500 bg-orange-100 dark:bg-orange-700 dark:text-orange-200',
 }
 
+
+const wrapperAlignmentClasses: Record<ToastAlign, string> = {
+    center: 'items-center',
+    end: 'items-end',
+    start: 'items-start',
+}
+const defaultWrapperClasses = 'flex w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800'
+
+const defaultContentClasses = 'text-sm font-normal'
+
 export function useToastClasses(props: UseToastClassesProps): UseToastClassesReturns {
 
     const typeClasses = computed(() => {
         return typeClassesMap[props.type.value]
     })
 
+    const wrapperClasses = computed(() => {
+        const alignmentClass = wrapperAlignmentClasses[props.alignment.value]
+        if(props.divide.value) return simplifyTailwindClasses(defaultWrapperClasses, 'dark:divide-gray-700 divide-x divide-gray-200', alignmentClass)
+        return simplifyTailwindClasses(defaultWrapperClasses, alignmentClass)
+    })
+
+    const contentClasses = computed(() => {
+        if(props.type.value !== 'empty' && props.divide.value) return simplifyTailwindClasses(defaultContentClasses, 'pl-3')
+        return defaultContentClasses
+    })
+
     return {
         typeClasses,
+        wrapperClasses,
+        contentClasses,
     }
 }
diff --git a/src/components/Toast/types.ts b/src/components/Toast/types.ts
index 68ef43c..48e20c5 100644
--- a/src/components/Toast/types.ts
+++ b/src/components/Toast/types.ts
@@ -1 +1,2 @@
 export type ToastPreset = 'success' | 'warning' | 'danger' | 'empty'
+export type ToastAlign = 'start' | 'center' | 'end'
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
index 5fc5b62..e940a80 100644
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue
@@ -12,7 +12,8 @@ import type {
   ThemableChildrenApply,
 } from '@/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/types'
 import { toRefs } from 'vue'
-import { simplifyTailwindClasses } from '../../../../../utils/simplifyTailwindClasses'
+import { simplifyTailwindClasses } from '@/utils/simplifyTailwindClasses'
+import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
 
 const props = defineProps({
   apply: {
@@ -23,6 +24,10 @@ const props = defineProps({
     type: String,
     default: 'div',
   },
+  theme: {
+    type: String as PropType<FlowbiteTheme>,
+    default: undefined,
+  },
 })
 
 const { classes } = useFlowbiteThemableChildClasses(toRefs(props))
diff --git a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
index b0fe1de..00a41d3 100644
--- a/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
+++ b/src/components/utils/FlowbiteThemable/components/FlowbiteThemableChild/composables/useFlowbiteThemableChildClasses.ts
@@ -4,6 +4,7 @@ import type {
     ThemableChildrenApply,
 } from '../types'
 import { useFlowbiteThemable } from '../../../composables/useFlowbiteThemable'
+import type { FlowbiteTheme } from '@/components/utils/FlowbiteThemable/types'
 
 type UseFlowbiteThemableChildReturns = {
     classes: Ref<string>
@@ -11,11 +12,12 @@ type UseFlowbiteThemableChildReturns = {
 
 type UseFlowbiteThemableChildProps = {
     apply: Ref<ThemableChildrenApply[]>
+    theme?: Ref<FlowbiteTheme | undefined>
 }
 
 export function useFlowbiteThemableChildClasses(props: UseFlowbiteThemableChildProps): UseFlowbiteThemableChildReturns {
 
-    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable()
+    const { textClasses, borderClasses, backgroundClasses, hoverClasses, disabledClasses, focusClasses, isActive } = useFlowbiteThemable(props.theme?.value)
 
     const classes = computed(() => {
         if(!isActive.value) return ''
diff --git a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
index f000aca..195f75c 100644
--- a/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
+++ b/src/components/utils/FlowbiteThemable/composables/useFlowbiteThemable.ts
@@ -63,41 +63,45 @@ const flowbiteThemeClasses: FlowbiteThemes<FlowbiteTheme> = {
 
 }
 
-export function useFlowbiteThemable(): UseFlowbiteThemableReturns {
+export function useFlowbiteThemable(_theme?: FlowbiteTheme): UseFlowbiteThemableReturns {
 
     const theme = inject<Ref<FlowbiteTheme | null>>(FLOWBITE_THEMABLE_INJECTION_KEY, ref(null))
 
     const isActive = computed(() => !!theme?.value)
     const color = computed(() => theme?.value || undefined)
 
+    const themeName = computed(() => {
+        return _theme || theme.value
+    })
+
     const backgroundClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].background
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].background
     })
 
     const disabledClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].disabled
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].disabled
     })
 
     const hoverClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].hover
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].hover
     })
 
     const textClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].text
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].text
     })
 
     const borderClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].border
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].border
     })
 
     const focusClasses = computed(() => {
-        if(!theme.value) return ''
-        return flowbiteThemeClasses[theme.value].focus
+        if(!themeName.value) return ''
+        return flowbiteThemeClasses[themeName.value].focus
     })
 
     return {