diff --git a/doc/toast/BasicDoc.vue b/doc/toast/BasicDoc.vue
index 7e6a84f22..1d605388c 100644
--- a/doc/toast/BasicDoc.vue
+++ b/doc/toast/BasicDoc.vue
@@ -31,7 +31,7 @@ export default {
 export default {
     methods: {
         show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
         }
     }
 };
@@ -49,7 +49,7 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const show = () => {
-    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
 };
 <\/script>`
             }
@@ -57,7 +57,7 @@ const show = () => {
     },
     methods: {
         show() {
-            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content' });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3000 });
         }
     }
 };
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index a88760f9d..d0dc27623 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -37,9 +37,10 @@ export default {
 export default {
     methods: {
         showMultiple() {
-            this.$toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+            this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
+            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
         },
         clear() {
             this.$toast.removeAllGroups();
@@ -63,9 +64,10 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const showMultiple = () => {
-    toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 });
-    toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 });
-    toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 });
+    toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+    toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+    toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
+    toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
 };
 
 const clear = () => {
@@ -77,9 +79,10 @@ const clear = () => {
     },
     methods: {
         showMultiple() {
-            this.$toast.add({ severity: 'info', summary: 'Message 1', detail: 'Message 1 Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Message 2', detail: 'Message 2 Content', life: 3000 });
-            this.$toast.add({ severity: 'info', summary: 'Message 3', detail: 'Message 3 Content', life: 3000 });
+            this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Message Content', life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Info', detail: 'Message Content', life: 3050 });
+            this.$toast.add({ severity: 'warn', summary: 'Warning', detail: 'Message Content', life: 3100 });
+            this.$toast.add({ severity: 'error', summary: 'Error', detail: 'Message Content', life: 3150 });
         },
         clear() {
             this.$toast.removeAllGroups();
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index d50772f32..327443c65 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -43,16 +43,16 @@ export default {
 export default {
     methods: {
         showSuccess() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
         },
         showInfo() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
         },
         showWarn() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
         },
         showError() {
-            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
         }
     }
 };
@@ -75,19 +75,19 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const showSuccess = () => {
-    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' });
+    toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
 };
 
 const showInfo = () => {
-    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' });
+    toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
 };
 
 const showWarn = () => {
-    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' });
+    toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
 };
 
 const showError = () => {
-    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' });
+    toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
 };
 <\/script>`
             }
@@ -95,16 +95,16 @@ const showError = () => {
     },
     methods: {
         showSuccess() {
-            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'success', summary: 'Success Message', detail: 'Message Content', life: 3000 });
         },
         showInfo() {
-            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'info', summary: 'Info Message', detail: 'Message Content', life: 3000 });
         },
         showWarn() {
-            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'warn', summary: 'Warn Message', detail: 'Message Content', life: 3000 });
         },
         showError() {
-            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content' });
+            this.$toast.add({ severity: 'error', summary: 'Error Message', detail: 'Message Content', life: 3000 });
         }
     }
 };
diff --git a/doc/toast/StickyDoc.vue b/doc/toast/StickyDoc.vue
index ae0ecad31..3797a91d6 100644
--- a/doc/toast/StickyDoc.vue
+++ b/doc/toast/StickyDoc.vue
@@ -26,11 +26,11 @@ export default {
 
 <script>
 export default {
-  methods: {
-      showSticky() {
-          this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 });
-      }
-  }
+    methods: {
+        showSticky() {
+            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
+        }
+    }
 };
 <\/script>`,
                 composition: `
@@ -46,7 +46,7 @@ import { useToast } from "primevue/usetoast";
 const toast = useToast();
 
 const showSticky = () => {
-    toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 });
+    toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content'});
 };
 <\/script>`
             }
@@ -54,7 +54,7 @@ const showSticky = () => {
     },
     methods: {
         showSticky() {
-            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content', life: 3000 });
+            this.$toast.add({ severity: 'info', summary: 'Sticky Message', detail: 'Message Content' });
         }
     }
 };
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index ba1a2ac3c..4cad53d9b 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -8,8 +8,7 @@
                 <div class="flex flex-column align-items-center" style="flex: 1">
                     <div class="text-center">
                         <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <h4>{{ slotProps.message.summary }}</h4>
-                        <p>{{ slotProps.message.detail }}</p>
+                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
                     </div>
                     <div class="flex gap-2">
                         <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@@ -34,8 +33,7 @@ export default {
         <div class="flex flex-column align-items-center" style="flex: 1">
             <div class="text-center">
                 <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                <h4>{{ slotProps.message.summary }}</h4>
-                <p>{{ slotProps.message.detail }}</p>
+                <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
             </div>
             <div class="flex gap-2">
                 <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@@ -53,8 +51,7 @@ export default {
                 <div class="flex flex-column align-items-center" style="flex: 1">
                     <div class="text-center">
                         <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <h4>{{ slotProps.message.summary }}</h4>
-                        <p>{{ slotProps.message.detail }}</p>
+                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
                     </div>
                     <div class="flex gap-2">
                         <Button severity="success" label="Yes" @click="onConfirm()"></Button>
@@ -84,8 +81,7 @@ export default {
                 <div class="flex flex-column align-items-center" style="flex: 1">
                     <div class="text-center">
                         <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
-                        <h4>{{ slotProps.message.summary }}</h4>
-                        <p>{{ slotProps.message.detail }}</p>
+                        <div class="font-bold text-xl my-3">{{ slotProps.message.summary }}</div>
                     </div>
                     <div class="flex gap-2">
                         <Button severity="success" label="Yes" @click="onConfirm()"></Button>