From 0cb9eb29b15ab3bde908a1898897976ecd2055e4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 24 Jan 2024 01:25:44 +0300
Subject: [PATCH] Update avatar and dialog demos

---
 doc/avatar/IconDoc.vue         |  40 ++++-----
 doc/avatar/LabelDoc.vue        |  40 ++++-----
 doc/dialog/BasicDoc.vue        |   8 +-
 doc/dialog/HeadlessDoc.vue     |   4 +
 doc/dialog/MaximizableDoc.vue  |   8 +-
 doc/dialog/PositionDoc.vue     | 156 +++++++++++++++++++--------------
 doc/dialog/ResponsiveDoc.vue   |   8 +-
 doc/dialog/TemplateDoc.vue     |  68 +++++++++-----
 doc/dialog/WithoutModalDoc.vue |  86 ++++++++++++------
 9 files changed, 249 insertions(+), 169 deletions(-)

diff --git a/doc/avatar/IconDoc.vue b/doc/avatar/IconDoc.vue
index 06fea33e7..76324a78f 100644
--- a/doc/avatar/IconDoc.vue
+++ b/doc/avatar/IconDoc.vue
@@ -7,20 +7,20 @@
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
             </div>
 
             <div class="flex-auto">
                 <h5>Circle</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
             </div>
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
             </div>
         </div>
     </div>
@@ -34,14 +34,14 @@ export default {
             code: {
                 basic: `
 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
 
 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+<Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
 
-<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+<Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
 `,
                 options: `
 <template>
@@ -50,20 +50,20 @@ export default {
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
             </div>
 
             <div class="flex-auto">
                 <h5>Circle</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
             </div>
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
             </div>
         </div>
     </div>
@@ -80,20 +80,20 @@ export default {
             <div class="flex-auto">
                 <h5>Icon</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
             </div>
 
             <div class="flex-auto">
                 <h5>Circle</h5>
                 <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-                <Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
             </div>
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
+                <Avatar v-badge.danger="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
             </div>
         </div>
     </div>
diff --git a/doc/avatar/LabelDoc.vue b/doc/avatar/LabelDoc.vue
index 833025800..0187a6a2f 100644
--- a/doc/avatar/LabelDoc.vue
+++ b/doc/avatar/LabelDoc.vue
@@ -7,20 +7,20 @@
             <div class="flex-auto">
                 <h5>Label</h5>
                 <Avatar label="P" class="mr-2" size="xlarge" />
-                <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-                <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
             </div>
 
             <div class="flex-auto">
                 <h5>Circle</h5>
                 <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-                <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-                <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+                <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
             </div>
 
             <div class="flex-auto">
                 <h5>Badge</h5>
-                <Avatar v-badge="4" label="U" size="xlarge" />
+                <Avatar v-badge.danger="4" label="U" size="xlarge" />
             </div>
         </div>
     </div>
@@ -34,14 +34,14 @@ export default {
             code: {
                 basic: `
 <Avatar label="P" class="mr-2" size="xlarge" />
-<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
+<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
 
 <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+<Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+<Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
 
-<Avatar v-badge="4" label="U" size="xlarge" />
+<Avatar v-badge.danger="4" label="U" size="xlarge" />
 `,
                 options: `
 <template>
@@ -49,20 +49,20 @@ export default {
         <div class="flex-auto">
             <h5>Label</h5>
             <Avatar label="P" class="mr-2" size="xlarge" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
         </div>
 
         <div class="flex-auto">
             <h5>Circle</h5>
             <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
         </div>
 
         <div class="flex-auto">
             <h5>Badge</h5>
-            <Avatar v-badge="4" label="U" size="xlarge" />
+            <Avatar v-badge.danger="4" label="U" size="xlarge" />
         </div>
     </div>
 </template>
@@ -77,20 +77,20 @@ export default {
         <div class="flex-auto">
             <h5>Label</h5>
             <Avatar label="P" class="mr-2" size="xlarge" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
-            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" />
         </div>
 
         <div class="flex-auto">
             <h5>Circle</h5>
             <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
-            <Avatar label="V" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
-            <Avatar label="U" class="mr-2" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
+            <Avatar label="V" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
+            <Avatar label="U" class="mr-2" style="background-color: #dee9fc; color: #1a2551" shape="circle" />
         </div>
 
         <div class="flex-auto">
             <h5>Badge</h5>
-            <Avatar v-badge="4" label="U" size="xlarge" />
+            <Avatar v-badge.danger="4" label="U" size="xlarge" />
         </div>
     </div>
 </template>
diff --git a/doc/dialog/BasicDoc.vue b/doc/dialog/BasicDoc.vue
index b8c5985fb..82c1c45b6 100644
--- a/doc/dialog/BasicDoc.vue
+++ b/doc/dialog/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>Dialog is used as a container and visibility is controlled with a binding to <i>visible</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <span class="p-text-secondary block mb-5">Update your information.</span>
@@ -31,7 +31,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+<Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
     <span class="p-text-secondary block mb-5">Update your information.</span>
@@ -52,7 +52,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <span class="p-text-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
@@ -84,7 +84,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <span class="p-text-secondary block mb-5">Update your information.</span>
             <div class="flex align-items-center gap-3 mb-3">
diff --git a/doc/dialog/HeadlessDoc.vue b/doc/dialog/HeadlessDoc.vue
index fbf912d2a..42a978d23 100644
--- a/doc/dialog/HeadlessDoc.vue
+++ b/doc/dialog/HeadlessDoc.vue
@@ -9,6 +9,7 @@
             v-model:visible="visible"
             modal
             :pt="{
+                root: 'border-none',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
@@ -58,6 +59,7 @@ export default {
     v-model:visible="visible"
     modal
     :pt="{
+        root: 'border-none',
         mask: {
             style: 'backdrop-filter: blur(2px)'
         }
@@ -94,6 +96,7 @@ export default {
             v-model:visible="visible"
             modal
             :pt="{
+                root: 'border-none',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
@@ -148,6 +151,7 @@ export default {
             v-model:visible="visible"
             modal
             :pt="{
+                root: 'border-none',
                 mask: {
                     style: 'backdrop-filter: blur(2px)'
                 }
diff --git a/doc/dialog/MaximizableDoc.vue b/doc/dialog/MaximizableDoc.vue
index b6bd5bfcc..16c66eccd 100644
--- a/doc/dialog/MaximizableDoc.vue
+++ b/doc/dialog/MaximizableDoc.vue
@@ -3,7 +3,7 @@
         <p>Adding <i>maximizable</i> property enables the full screen mode.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
@@ -22,7 +22,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+<Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
     <p class="m-0">
@@ -34,7 +34,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -57,7 +57,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" maximizable modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index f561e2759..de53c0e11 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -4,29 +4,34 @@
     </DocSectionText>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" @click="visible = false" text />
-                <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
-            </template>
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
     <DocSectionCode :code="code" />
@@ -41,58 +46,68 @@ export default {
             code: {
                 basic: `
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-    <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
-    <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
+    <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
 </div>
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-    <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
-    <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
-    <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
+    <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+    <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
 </div>
 <div class="flex flex-wrap justify-content-center gap-2">
-    <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
-    <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
-    <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
+    <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+    <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+    <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
 </div>
 
-<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-    <template #footer>
-        <Button label="No" icon="pi pi-times" @click="visible = false" text />
-        <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
-    </template>
+<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <div class="flex align-items-center gap-3 mb-3">
+        <label for="username" class="font-semibold w-6rem">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex align-items-center gap-3 mb-5">
+        <label for="email" class="font-semibold w-6rem">Email</label>
+        <InputText id="Email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-content-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
 </Dialog>
 `,
                 options: `
 <template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" @click="visible = false" text />
-                <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
-            </template>
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
 </template>
@@ -118,29 +133,34 @@ export default {
 <template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="help" style="min-width: 10rem" />
+            <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="warning" style="min-width: 10rem" />
+            <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" severity="secondary" style="min-width: 10rem" />
+            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" severity="secondary" style="min-width: 10rem" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="success" style="min-width: 10rem" />
+            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" severity="secondary" style="min-width: 10rem" />
+            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" severity="secondary" style="min-width: 10rem" />
+            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" severity="secondary" style="min-width: 10rem" />
         </div>
 
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }" :position="position" :modal="true" :draggable="false">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
-            <template #footer>
-                <Button label="No" icon="pi pi-times" @click="visible = false" text />
-                <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
-            </template>
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }" :position="position" :modal="true" :draggable="false">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
 </template>
diff --git a/doc/dialog/ResponsiveDoc.vue b/doc/dialog/ResponsiveDoc.vue
index 71d5c9314..9cd4a502f 100644
--- a/doc/dialog/ResponsiveDoc.vue
+++ b/doc/dialog/ResponsiveDoc.vue
@@ -7,7 +7,7 @@
     </DocSectionText>
 
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
 
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
@@ -26,7 +26,7 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+<Button label="Show" @click="visible = true" />
 
 <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
     <p class="m-0">
@@ -38,7 +38,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -61,7 +61,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
         <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50vw' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
             <p class="m-0">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
diff --git a/doc/dialog/TemplateDoc.vue b/doc/dialog/TemplateDoc.vue
index cde5b1db8..24ab5d67c 100644
--- a/doc/dialog/TemplateDoc.vue
+++ b/doc/dialog/TemplateDoc.vue
@@ -3,19 +3,24 @@
         <p>Header and Footer sections allow customization via templating.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" modal :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
                 <div class="inline-flex align-items-center justify-content-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-2">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
             <template #footer>
                 <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
@@ -31,19 +36,24 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+<Button label="Show" @click="visible = true" />
 
-<Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+<Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
     <template #header>
         <div class="inline-flex align-items-center justify-content-center gap-2">
             <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold white-space-nowrap">Amy Elsner</span>
         </div>
     </template>
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
+    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <div class="flex align-items-center gap-3 mb-3">
+        <label for="username" class="font-semibold w-6rem">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex align-items-center gap-3 mb-2">
+        <label for="email" class="font-semibold w-6rem">Email</label>
+        <InputText id="Email" class="flex-auto" autocomplete="off" />
+    </div>
     <template #footer>
         <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
@@ -52,18 +62,23 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
                 <div class="inline-flex align-items-center justify-content-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-2">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
             <template #footer>
                 <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
@@ -84,18 +99,23 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-        <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" modal header="Edit Profile" :style="{ width: '25rem' }">
             <template #header>
                 <div class="inline-flex align-items-center justify-content-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold white-space-nowrap">Amy Elsner</span>
                 </div>
             </template>
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-2">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
             <template #footer>
                 <Button label="Ok" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
diff --git a/doc/dialog/WithoutModalDoc.vue b/doc/dialog/WithoutModalDoc.vue
index 04a773d4a..f61c3ac17 100644
--- a/doc/dialog/WithoutModalDoc.vue
+++ b/doc/dialog/WithoutModalDoc.vue
@@ -1,15 +1,24 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Mask layer behind the Dialog can be turned off by disabling the <i>modal</i> property.</p>
+        <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+        <Button label="Show" @click="visible = true" />
 
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
     <DocSectionCode :code="code" />
@@ -22,24 +31,42 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Button label="Show" icon="pi pi-external-link" @click="visible = true" />
+<Button label="Show" @click="visible = true" />
 
-<Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-    <p class="m-0">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
+<Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+    <span class="p-text-secondary block mb-5">Update your information.</span>
+    <div class="flex align-items-center gap-3 mb-3">
+        <label for="username" class="font-semibold w-6rem">Username</label>
+        <InputText id="username" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex align-items-center gap-3 mb-5">
+        <label for="email" class="font-semibold w-6rem">Email</label>
+        <InputText id="Email" class="flex-auto" autocomplete="off" />
+    </div>
+    <div class="flex justify-content-end gap-2">
+        <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+        <Button type="button" label="Save" @click="visible = false"></Button>
+    </div>
 </Dialog>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
 </template>
@@ -57,12 +84,21 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Show" icon="pi pi-external-link" @click="visible = true" />
-        <Dialog v-model:visible="visible" header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
-            <p class="m-0">
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-            </p>
+        <Button label="Show" @click="visible = true" />
+        <Dialog v-model:visible="visible" header="Edit Profile" :style="{ width: '25rem' }">
+            <span class="p-text-secondary block mb-5">Update your information.</span>
+            <div class="flex align-items-center gap-3 mb-3">
+                <label for="username" class="font-semibold w-6rem">Username</label>
+                <InputText id="username" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex align-items-center gap-3 mb-5">
+                <label for="email" class="font-semibold w-6rem">Email</label>
+                <InputText id="Email" class="flex-auto" autocomplete="off" />
+            </div>
+            <div class="flex justify-content-end gap-2">
+                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"></Button>
+                <Button type="button" label="Save" @click="visible = false"></Button>
+            </div>
         </Dialog>
     </div>
 </template>