From c9901c3c0c3fd21e273f3a35d6dc04ae7afbbc3b Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 24 Jan 2024 09:54:02 +0300
Subject: [PATCH] Update dialog docs

---
 doc/confirmdialog/BasicDoc.vue    | 49 +++++++++++++-------
 doc/confirmdialog/HeadlessDoc.vue |  8 ++--
 doc/confirmdialog/PositionDoc.vue | 76 ++++++++++++++++++-------------
 doc/confirmdialog/TemplateDoc.vue | 26 +++++++----
 doc/confirmpopup/BasicDoc.vue     | 37 +++++++++++----
 doc/confirmpopup/HeadlessDoc.vue  | 38 ++++++++--------
 doc/confirmpopup/TemplateDoc.vue  | 34 ++++++++------
 doc/dialog/TemplateDoc.vue        |  8 ++--
 8 files changed, 168 insertions(+), 108 deletions(-)

diff --git a/doc/confirmdialog/BasicDoc.vue b/doc/confirmdialog/BasicDoc.vue
index e5b213d6b..b1dc45d75 100644
--- a/doc/confirmdialog/BasicDoc.vue
+++ b/doc/confirmdialog/BasicDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,16 +17,16 @@ export default {
             code: {
                 basic: `
 <ConfirmDialog></ConfirmDialog>
-<Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-<Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
+<Button @click="confirm1()" label="Save" outlined></Button>
+<Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
 `,
                 options: `
 <template>
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
 </template>
 
@@ -38,6 +38,9 @@ export default {
                 message: 'Are you sure you want to proceed?',
                 header: 'Confirmation',
                 icon: 'pi pi-exclamation-triangle',
+                rejectClass: 'p-button-secondary p-button-outlined',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -49,10 +52,12 @@ export default {
         confirm2() {
             this.$confirm.require({
                 message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                header: 'Danger Zone',
                 icon: 'pi pi-info-circle',
-                rejectClass: 'p-button-text p-button-text',
-                acceptClass: 'p-button-danger p-button-text',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Delete',
+                rejectClass: 'p-button-secondary p-button-outlined',
+                acceptClass: 'p-button-danger',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -70,8 +75,8 @@ export default {
     <Toast />
     <ConfirmDialog></ConfirmDialog>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1()" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2()" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1()" label="Save" outlined></Button>
+        <Button @click="confirm2()" label="Delete" severity="danger" outlined></Button>
     </div>
 </template>
 
@@ -87,6 +92,9 @@ const confirm1 = () => {
         message: 'Are you sure you want to proceed?',
         header: 'Confirmation',
         icon: 'pi pi-exclamation-triangle',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Save',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -99,10 +107,12 @@ const confirm1 = () => {
 const confirm2 = () => {
     confirm.require({
         message: 'Do you want to delete this record?',
-        header: 'Delete Confirmation',
+        header: 'Danger Zone',
         icon: 'pi pi-info-circle',
-        rejectClass: 'p-button-text p-button-text',
-        acceptClass: 'p-button-danger p-button-text',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Delete',
+        rejectClass: 'p-button-secondary p-button-outlined',
+        acceptClass: 'p-button-danger',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -122,6 +132,9 @@ const confirm2 = () => {
                 message: 'Are you sure you want to proceed?',
                 header: 'Confirmation',
                 icon: 'pi pi-exclamation-triangle',
+                rejectClass: 'p-button-secondary p-button-outlined',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -133,10 +146,12 @@ const confirm2 = () => {
         confirm2() {
             this.$confirm.require({
                 message: 'Do you want to delete this record?',
-                header: 'Delete Confirmation',
+                header: 'Danger Zone',
                 icon: 'pi pi-info-circle',
-                rejectClass: 'p-button-text p-button-text',
-                acceptClass: 'p-button-danger p-button-text',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Delete',
+                rejectClass: 'p-button-secondary p-button-outlined',
+                acceptClass: 'p-button-danger',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
diff --git a/doc/confirmdialog/HeadlessDoc.vue b/doc/confirmdialog/HeadlessDoc.vue
index b5feda522..c6225a776 100644
--- a/doc/confirmdialog/HeadlessDoc.vue
+++ b/doc/confirmdialog/HeadlessDoc.vue
@@ -18,7 +18,7 @@
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -44,7 +44,7 @@ export default {
         </div>
     </template>
 </ConfirmDialog>
-<Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="requireConfirmation()" label="Save"></Button>
 `,
                 options: `
 <template>
@@ -64,7 +64,7 @@ export default {
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <Toast />
 </template>
@@ -107,7 +107,7 @@ export default {
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation()" label="Save"></Button>
     </div>
     <Toast />
 </template>
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index 3688c8d54..ac8fa5cbe 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -5,18 +5,18 @@
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -30,18 +30,18 @@ export default {
                 basic: `
 <ConfirmDialog group="positioned"></ConfirmDialog>
 <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
 </div>
 <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
 </div>
 <div class="flex flex-wrap justify-content-center gap-2">
-    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
-    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
 </div>
 `,
                 options: `
@@ -50,18 +50,18 @@ export default {
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
     </div>
 </template>
@@ -76,6 +76,10 @@ export default {
                 header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
+                rejectClass: 'p-button-secondary p-button-text',
+                acceptClass: 'p-button-text',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
@@ -94,18 +98,18 @@ export default {
     <ConfirmDialog group="positioned"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-3">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" style="min-width: 10rem"></Button>
         </div>
     </div>
 </template>
@@ -124,6 +128,10 @@ const confirmPosition = (position) => {
         header: 'Confirmation',
         icon: 'pi pi-info-circle',
         position: position,
+        rejectClass: 'p-button-secondary p-button-text',
+        acceptClass: 'p-button-text',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Save',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
         },
@@ -145,6 +153,10 @@ const confirmPosition = (position) => {
                 header: 'Confirmation',
                 icon: 'pi pi-info-circle',
                 position: position,
+                rejectClass: 'p-button-secondary p-button-text',
+                acceptClass: 'p-button-text',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Request submitted', life: 3000 });
                 },
diff --git a/doc/confirmdialog/TemplateDoc.vue b/doc/confirmdialog/TemplateDoc.vue
index 47fa1c7da..38850982b 100644
--- a/doc/confirmdialog/TemplateDoc.vue
+++ b/doc/confirmdialog/TemplateDoc.vue
@@ -11,7 +11,7 @@
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -30,7 +30,7 @@ export default {
         </div>
     </template>
 </ConfirmDialog>
-<Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="showTemplate()" label="Save"></Button>
 `,
                 options: `
 <template>
@@ -43,7 +43,7 @@ export default {
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <Toast />
 </template>
@@ -59,8 +59,10 @@ export default {
                 icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                rejectClass: 'p-button-sm',
-                acceptClass: 'p-button-outlined p-button-sm',
+                rejectClass: 'p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -84,7 +86,7 @@ export default {
         </template>
     </ConfirmDialog>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate()" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate()" label="Save"></Button>
     </div>
     <Toast />
 </template>
@@ -104,8 +106,10 @@ const showTemplate = () => {
         icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
-        rejectClass: 'p-button-sm',
-        acceptClass: 'p-button-outlined p-button-sm',
+        rejectClass: 'p-button-outlined p-button-sm',
+        acceptClass: 'p-button-sm',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Save',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -128,8 +132,10 @@ const showTemplate = () => {
                 icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                rejectClass: 'p-button-sm',
-                acceptClass: 'p-button-outlined p-button-sm',
+                rejectClass: 'p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index 7b695081d..2bbb340a5 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -4,8 +4,8 @@
     </DocSectionText>
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -17,16 +17,16 @@ export default {
             code: {
                 basic: `
 <ConfirmPopup></ConfirmPopup>
-<Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-<Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
+<Button @click="confirm1($event)" label="Save" outlined></Button>
+<Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
 `,
                 options: `
 <template>
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
 </template>
 
@@ -38,6 +38,10 @@ export default {
                 target: event.currentTarget,
                 message: 'Are you sure you want to proceed?',
                 icon: 'pi pi-exclamation-triangle',
+                rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -51,7 +55,10 @@ export default {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
+                rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
                 acceptClass: 'p-button-danger p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Delete',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
@@ -69,8 +76,8 @@ export default {
     <Toast />
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
-        <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" severity="danger"></Button>
+        <Button @click="confirm1($event)" label="Save" outlined></Button>
+        <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
     </div>
 </template>
 
@@ -86,6 +93,10 @@ const confirm1 = (event) => {
         target: event.currentTarget,
         message: 'Are you sure you want to proceed?',
         icon: 'pi pi-exclamation-triangle',
+        rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
+        acceptClass: 'p-button-sm',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Save',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
         },
@@ -100,7 +111,10 @@ const confirm2 = (event) => {
         target: event.currentTarget,
         message: 'Do you want to delete this record?',
         icon: 'pi pi-info-circle',
+        rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
         acceptClass: 'p-button-danger p-button-sm',
+        rejectLabel: 'Cancel',
+        acceptLabel: 'Delete',
         accept: () => {
             toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
         },
@@ -120,6 +134,10 @@ const confirm2 = (event) => {
                 target: event.currentTarget,
                 message: 'Are you sure you want to proceed?',
                 icon: 'pi pi-exclamation-triangle',
+                rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Save',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -133,7 +151,10 @@ const confirm2 = (event) => {
                 target: event.currentTarget,
                 message: 'Do you want to delete this record?',
                 icon: 'pi pi-info-circle',
+                rejectClass: 'p-button-secondary p-button-outlined p-button-sm',
                 acceptClass: 'p-button-danger p-button-sm',
+                rejectLabel: 'Cancel',
+                acceptLabel: 'Delete',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
                 },
diff --git a/doc/confirmpopup/HeadlessDoc.vue b/doc/confirmpopup/HeadlessDoc.vue
index 16d765126..d3c6e9ad1 100644
--- a/doc/confirmpopup/HeadlessDoc.vue
+++ b/doc/confirmpopup/HeadlessDoc.vue
@@ -4,17 +4,17 @@
     </DocSectionText>
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="bg-gray-900 text-white border-round p-3">
+            <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -27,33 +27,33 @@ export default {
                 basic: `
 <ConfirmPopup group="headless">
     <template #container="{ message, acceptCallback, rejectCallback }">
-        <div class="bg-gray-900 text-white border-round p-3">
+        <div class="border-round p-3">
             <span>{{ message.message }}</span>
             <div class="flex align-items-center gap-2 mt-3">
-                <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
-                <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
+                <Button label="Save" @click="acceptCallback" size="small"></Button>
+                <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
             </div>
         </div>
     </template>
 </ConfirmPopup>
-<Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="requireConfirmation($event)" label="Save"></Button>
 `,
                 options: `
 <template>
     <Toast />
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="bg-gray-900 text-white border-round p-3">
+            <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
 </template>
 
@@ -64,7 +64,7 @@ export default {
             this.$confirm.require({
                 target: event.currentTarget,
                 group: 'headless',
-                message: 'Are you sure? You cannot undo this.',
+                message: 'Save your current process?',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -82,17 +82,17 @@ export default {
     <Toast />
     <ConfirmPopup group="headless">
         <template #container="{ message, acceptCallback, rejectCallback }">
-            <div class="bg-gray-900 text-white border-round p-3">
+            <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <Button label="Save" @click="acceptCallback" size="small" outlined></Button>
-                    <Button label="Cancel" outlined @click="rejectCallback" size="small" text></Button>
+                    <Button label="Save" @click="acceptCallback" size="small"></Button>
+                    <Button label="Cancel" outlined @click="rejectCallback" severity="secondary" size="small" text></Button>
                 </div>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="requireConfirmation($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="requireConfirmation($event)" label="Save"></Button>
     </div>
 </template>
 
@@ -107,7 +107,7 @@ const requireConfirmation = (event) => {
     confirm.require({
         target: event.currentTarget,
         group: 'headless',
-        message: 'Are you sure? You cannot undo this.',
+        message: 'Save your current process?',
         accept: () => {
             toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
         },
@@ -126,7 +126,7 @@ const requireConfirmation = (event) => {
             this.$confirm.require({
                 target: event.currentTarget,
                 group: 'headless',
-                message: 'Are you sure? You cannot undo this.',
+                message: 'Save your current process?',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/doc/confirmpopup/TemplateDoc.vue b/doc/confirmpopup/TemplateDoc.vue
index fee39f73b..610866079 100644
--- a/doc/confirmpopup/TemplateDoc.vue
+++ b/doc/confirmpopup/TemplateDoc.vue
@@ -4,14 +4,14 @@
     </DocSectionText>
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -24,27 +24,27 @@ export default {
                 basic: `
 <ConfirmPopup group="templating">
     <template #message="slotProps">
-        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+        <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
             <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
             <p>{{ slotProps.message.message }}</p>
         </div>
     </template>
 </ConfirmPopup>
-<Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
+<Button @click="showTemplate($event)" label="Save"></Button>
 `,
                 options: `
 <template>
     <Toast />
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
 </template>
 
@@ -59,8 +59,10 @@ export default {
                 icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                rejectClass: 'p-button-sm',
-                acceptClass: 'p-button-outlined p-button-sm',
+                acceptLabel: 'Confirm',
+                rejectLabel: 'Cancel',
+                rejectClass: 'p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
@@ -78,14 +80,14 @@ export default {
     <Toast />
     <ConfirmPopup group="templating">
         <template #message="slotProps">
-            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3">
+            <div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border p-3 mb-3 pb-0">
                 <i :class="slotProps.message.icon" class="text-6xl text-primary-500"></i>
                 <p>{{ slotProps.message.message }}</p>
             </div>
         </template>
     </ConfirmPopup>
     <div class="card flex justify-content-center">
-        <Button @click="showTemplate($event)" icon="pi pi-check" label="Confirm"></Button>
+        <Button @click="showTemplate($event)" label="Save"></Button>
     </div>
 </template>
 
@@ -104,8 +106,10 @@ const showTemplate = (event) => {
         icon: 'pi pi-exclamation-circle',
         acceptIcon: 'pi pi-check',
         rejectIcon: 'pi pi-times',
-        rejectClass: 'p-button-sm',
-        acceptClass: 'p-button-outlined p-button-sm',
+        acceptLabel: 'Confirm',
+        rejectLabel: 'Cancel',
+        rejectClass: 'p-button-outlined p-button-sm',
+        acceptClass: 'p-button-sm',
         accept: () => {
             toast.add({severity:'info', summary:'Confirmed', detail:'You have accepted', life: 3000});
         },
@@ -128,8 +132,10 @@ const showTemplate = (event) => {
                 icon: 'pi pi-exclamation-circle',
                 acceptIcon: 'pi pi-check',
                 rejectIcon: 'pi pi-times',
-                rejectClass: 'p-button-sm',
-                acceptClass: 'p-button-outlined p-button-sm',
+                acceptLabel: 'Confirm',
+                rejectLabel: 'Cancel',
+                rejectClass: 'p-button-outlined p-button-sm',
+                acceptClass: 'p-button-sm',
                 accept: () => {
                     this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
                 },
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index 24ab5d67c..5089d9caf 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -22,7 +22,7 @@
                 <InputText id="Email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
+                <Button label="Save" outlined @click="visible = false" autofocus />
             </template>
         </Dialog>
     </div>
@@ -55,7 +55,7 @@ export default {
         <InputText id="Email" class="flex-auto" autocomplete="off" />
     </div>
     <template #footer>
-        <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
+        <Button label="Save" outlined @click="visible = false" autofocus />
     </template>
 </Dialog>
 `,
@@ -80,7 +80,7 @@ export default {
                 <InputText id="Email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
+                <Button label="Save" outlined @click="visible = false" autofocus />
             </template>
         </Dialog>
     </div>
@@ -117,7 +117,7 @@ export default {
                 <InputText id="Email" class="flex-auto" autocomplete="off" />
             </div>
             <template #footer>
-                <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
+                <Button label="Save" outlined @click="visible = false" autofocus />
             </template>
         </Dialog>
     </div>