From 8bf84003bdabb692a4c4eeba41eec4b4832d8ee4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 22 Feb 2024 12:35:09 +0300
Subject: [PATCH] Updated stepper demos

---
 doc/stepper/BasicDoc.vue    |  80 ++++---
 doc/stepper/LinearDoc.vue   |  80 ++++---
 doc/stepper/TemplateDoc.vue | 421 +++++++++++++++++-------------------
 doc/stepper/VerticalDoc.vue |  80 +++----
 4 files changed, 327 insertions(+), 334 deletions(-)

diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index 182a4ba12..55d642eb1 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -2,16 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -22,18 +21,17 @@
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper>
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -67,18 +64,17 @@ export default {
             </div>
             <div class="flex pt-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -86,16 +82,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -106,37 +101,41 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -147,27 +146,38 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+</style>
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 824c88b12..186c183b7 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -2,16 +2,15 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper is linear by default to enforce completion of a previus step to proceed, set <i>linear</i> as true for non-linear mode.</p>
     </DocSectionText>
-    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -22,18 +21,17 @@
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper linear>
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -67,18 +64,17 @@ export default {
             </div>
             <div class="flex pt-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -86,16 +82,15 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -106,37 +101,41 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `,
                 composition: `
 <template>
-    <div class="card">
+    <div class="card flex justify-content-center">
         <Stepper linear>
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -147,27 +146,38 @@ export default {
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
         </Stepper>
     </div>
 </template>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+<\/style>
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 50rem;
+}
+</style>
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index b2ef874f1..557b67aae 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -2,23 +2,19 @@
     <DocSectionText v-bind="$attrs">
         <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
     </DocSectionText>
-    <div class="card flex flex-column justify-content-center" style="padding-left: 20rem; padding-right: 20rem">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -39,66 +35,58 @@
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -116,31 +104,29 @@ export default {
             email: null,
             password: null,
             option1: false,
-            option2: true,
+            option2: false,
             option3: false,
-            option4: true,
+            option4: false,
             option5: false,
-            option6: true,
-            option7: true,
-            option8: true,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false,
             code: {
                 basic: `
 <Stepper v-model:activeStep="active">
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-user" />
                 </span>
-                <span class="text-base ml-2">Account</span>
-            </div>
+            </button>
         </template>
-        <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                <h3 class="text-center mt-3">Create your account</h3>
+        <template #content="{ nextCallback }">
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                 <div class="field p-fluid">
                     <IconField>
                         <InputIcon>
@@ -161,63 +147,58 @@ export default {
                     <Password v-model="password" toggleMask placeholder="Password" />
                 </div>
             </div>
-            <div class="flex pt-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex pt-4 justify-content-end">
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-star" />
                 </span>
-                <span class="text-base ml-2">Interests</span>
-            </div>
+            </button>
         </template>
         <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                <h3 class="text-center mt-3">Create your interests</h3>
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                 <div class="flex flex-wrap justify-content-center gap-3">
-                    <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                    <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                    <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                    <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                    <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                    <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                    <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                    <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                    <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                    <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                    <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                    <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                    <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                    <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                    <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                    <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                    <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                    <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                 </div>
             </div>
             <div class="flex pt-4 justify-content-between">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel>
-        <template #header="{ index, clickCallback, headerClass, numberClass }">
-            <div :class="headerClass" @click="clickCallback">
-                <span :class="[numberClass, 'text-color']">
-                    <i v-if="index < active" class="pi pi-check font-semibold" />
-                    <template v-else>
-                        {{ index + 1 }}
-                    </template>
+        <template #header="{ index, clickCallback }">
+            <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                    <i class="pi pi-id-card" />
                 </span>
-                <span class="text-base ml-2">Complete</span>
-            </div>
+            </button>
         </template>
-        <template #content="{ prevCallback, nextCallback }">
-            <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
+        <template #content="{ prevCallback }">
+            <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                <div class="text-center">
+                    <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
+                </div>
             </div>
-            <div class="flex pt-4 justify-content-between">
+            <div class="flex pt-4 justify-content-start">
                 <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -225,23 +206,19 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -262,66 +239,58 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -338,37 +307,42 @@ export default {
             email: null,
             password: null,
             option1: false,
-            option2: true,
+            option2: false,
             option3: false,
-            option4: true,
+            option4: false,
             option5: false,
-            option6: true,
-            option7: true,
-            option8: true,
+            option6: false,
+            option7: false,
+            option8: false,
+            option9: false,
+            option10: false
         }
     }
 }
 <\/script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+<\/style>
+
 `,
                 composition: `
 <template>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex justify-content-center">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-user" />
                         </span>
-                        <span class="text-base ml-2">Account</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-2 mx-auto" style="max-width: 20rem">
-                        <h3 class="text-center mt-3">Create your account</h3>
+                <template #content="{ nextCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 20rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Create your account</div>
                         <div class="field p-fluid">
                             <IconField>
                                 <InputIcon>
@@ -389,66 +363,58 @@ export default {
                             <Password v-model="password" toggleMask placeholder="Password" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex pt-4 justify-content-end">
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-star" />
                         </span>
-                        <span class="text-base ml-2">Interests</span>
-                    </div>
+                    </button>
                 </template>
                 <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3">Create your interests</h3>
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Choose your interests</div>
                         <div class="flex flex-wrap justify-content-center gap-3">
-                            <ToggleButton v-model="option1" class="w-9rem" onLabel="Table Tennis" offLabel="Table Tennis" />
-                            <ToggleButton v-model="option2" class="w-4rem" onLabel="Art" offLabel="Art" />
-                            <ToggleButton v-model="option3" class="w-5rem" onLabel="Music" offLabel="Music" />
-                            <ToggleButton v-model="option4" class="w-6rem" onLabel="Netflix" offLabel="Netflix" />
-                            <ToggleButton v-model="option5" class="w-9rem" onLabel="Guitar Hero" offLabel="Guitar Hero" />
-                            <ToggleButton v-model="option6" class="w-6rem" onLabel="Movie" offLabel="Movie" />
-                            <ToggleButton v-model="option7" class="w-9rem" onLabel="Basketball" offLabel="Basketball" />
-                            <ToggleButton v-model="option8" class="w-8rem" onLabel="PlayStation" offLabel="PlayStation" />
+                            <ToggleButton v-model="option1" onLabel="Nature" offLabel="Nature" />
+                            <ToggleButton v-model="option2" onLabel="Art" offLabel="Art" />
+                            <ToggleButton v-model="option3" onLabel="Music" offLabel="Music" />
+                            <ToggleButton v-model="option4" onLabel="Design" offLabel="Design" />
+                            <ToggleButton v-model="option5" onLabel="Photography" offLabel="Photography" />
+                            <ToggleButton v-model="option6" onLabel="Movies" offLabel="Movies" />
+                            <ToggleButton v-model="option7" onLabel="Sports" offLabel="Sports" />
+                            <ToggleButton v-model="option8" onLabel="Gaming" offLabel="Gaming" />
+                            <ToggleButton v-model="option9" onLabel="Traveling" offLabel="Traveling" />
+                            <ToggleButton v-model="option10" onLabel="Dancing" offLabel="Dancing" />
                         </div>
                     </div>
                     <div class="flex pt-4 justify-content-between">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                        <Button label="Next" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel>
-                <template #header="{ index, clickCallback, headerClass, numberClass }">
-                    <div :class="headerClass" @click="clickCallback">
-                        <span :class="[numberClass, 'text-color']">
-                            <i v-if="index < active" class="pi pi-check font-semibold" />
-                            <template v-else>
-                                {{ index + 1 }}
-                            </template>
+                <template #header="{ index, clickCallback }">
+                    <button class="bg-transparent border-none inline-flex flex-column gap-2" @click="clickCallback">
+                        <span :class="['border-round border-2 w-3rem h-3rem inline-flex align-items-center justify-content-center', { 'bg-primary border-primary': index <= active, 'surface-border': index > active }]">
+                            <i class="pi pi-id-card" />
                         </span>
-                        <span class="text-base ml-2">Complete</span>
-                    </div>
+                    </button>
                 </template>
-                <template #content="{ prevCallback, nextCallback }">
-                    <div class="flex flex-column justify-content-center gap-3 mx-auto" style="max-width: 24rem">
-                        <h3 class="text-center mt-3 mb-6">Account created successfully</h3>
-                        <div class="flex justify-content-center">
-                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper-content.svg" />
+                <template #content="{ prevCallback }">
+                    <div class="flex flex-column gap-2 mx-auto" style="min-height: 16rem; max-width: 24rem">
+                        <div class="text-center mt-3 mb-3 text-xl font-semibold">Account created successfully</div>
+                        <div class="text-center">
+                            <img alt="logo" src="https://primefaces.org/cdn/primevue/images/stepper/content.svg" />
                         </div>
                     </div>
-                    <div class="flex pt-4 justify-content-between">
+                    <div class="flex pt-4 justify-content-start">
                         <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -466,18 +432,33 @@ const name = ref();
 const email = ref();
 const password = ref();
 const option1 = ref(false);
-const option2 = ref(true);
+const option2 = ref(false);
 const option3 = ref(false);
-const option4 = ref(true);
+const option4 = ref(false);
 const option5 = ref(false);
-const option6 = ref(true);
-const option7 = ref(true);
-const option8 = ref(true);
+const option6 = ref(false);
+const option7 = ref(false);
+const option8 = ref(false);
+const option9 = ref(false);
+const option10 = ref(false);
 
 <\/script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+<\/style>
+
 `
             }
         };
     }
 };
 </script>
+
+<style scoped>
+.p-stepper {
+    flex-basis: 40rem;
+}
+</style>
diff --git a/doc/stepper/VerticalDoc.vue b/doc/stepper/VerticalDoc.vue
index a066d5ed9..f6bcba0e7 100644
--- a/doc/stepper/VerticalDoc.vue
+++ b/doc/stepper/VerticalDoc.vue
@@ -5,13 +5,12 @@
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -20,20 +19,19 @@
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -50,13 +48,12 @@ export default {
                 basic: `
 <Stepper orientation="vertical">
     <StepperPanel header="Header I">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ nextCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex py-4">
+                <Button label="Next" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -65,20 +62,19 @@ export default {
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+            <div class="flex py-4 gap-2">
+                <Button label="Back" severity="secondary" @click="prevCallback" />
+                <Button label="Next" @click="nextCallback" />
             </div>
         </template>
     </StepperPanel>
     <StepperPanel header="Header III">
-        <template #content="{ prevCallback, nextCallback }">
+        <template #content="{ prevCallback }">
             <div class="flex flex-column h-12rem">
                 <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
             </div>
-            <div class="flex py-4 justify-content-between">
-                <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+            <div class="flex py-4">
+                <Button label="Back" severity="secondary" @click="prevCallback" />
             </div>
         </template>
     </StepperPanel>
@@ -89,13 +85,12 @@ export default {
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -104,20 +99,19 @@ export default {
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -130,13 +124,12 @@ export default {
     <div class="card">
         <Stepper orientation="vertical">
             <StepperPanel header="Header I">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ nextCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" disabled @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
@@ -145,20 +138,19 @@ export default {
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4 gap-2">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
+                        <Button label="Next" @click="nextCallback" />
                     </div>
                 </template>
             </StepperPanel>
             <StepperPanel header="Header III">
-                <template #content="{ prevCallback, nextCallback }">
+                <template #content="{ prevCallback }">
                     <div class="flex flex-column h-12rem">
                         <div class="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
                     </div>
-                    <div class="flex py-4 justify-content-between">
-                        <Button label="Back" severity="secondary" icon="pi pi-arrow-left" @click="prevCallback" />
-                        <Button label="Next" severity="contrast" icon="pi pi-arrow-right" disabled iconPos="right" @click="nextCallback" />
+                    <div class="flex py-4">
+                        <Button label="Back" severity="secondary" @click="prevCallback" />
                     </div>
                 </template>
             </StepperPanel>