diff --git a/doc/accordion/ControlledDoc.vue b/doc/accordion/ControlledDoc.vue
index fd1979f42..4ef93f09e 100644
--- a/doc/accordion/ControlledDoc.vue
+++ b/doc/accordion/ControlledDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card">
         <div class="pb-3">
-            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -41,9 +41,9 @@ export default {
             code: {
                 basic: `
 <div class="pb-3">
-    <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-    <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
-    <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+    <Button @click="active = 0" text label="Activate 1st" />
+    <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+    <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
 </div>
 
 <Accordion v-model:activeIndex="active">
@@ -70,9 +70,9 @@ export default {
 <template>
     <div class="card">
         <div class="pb-3">
-            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -111,9 +111,9 @@ export default {
 <template>
     <div class="card">
         <div class="pb-3">
-            <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active = 0" text label="Activate 1st" />
+            <Button @click="active = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <Accordion v-model:activeIndex="active">
diff --git a/doc/badge/ButtonDoc.vue b/doc/badge/ButtonDoc.vue
index 357fbd3bd..a0e00bc5e 100644
--- a/doc/badge/ButtonDoc.vue
+++ b/doc/badge/ButtonDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +16,12 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />`,
+<Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />`,
                 options: `
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
     </div>
 </template>
 
@@ -32,7 +32,7 @@ export default {
 <template>
     <div class="card flex flex-wrap justify-content-center gap-2">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
+        <Button type="button" label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger" />
     </div>
 </template>
 
diff --git a/doc/button/BadgesDoc.vue b/doc/button/BadgesDoc.vue
index 3cf50f93c..c17f6ff03 100644
--- a/doc/button/BadgesDoc.vue
+++ b/doc/button/BadgesDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,12 +16,12 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="8" />
-<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" />`,
+<Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
     </div>
 </template>
 
@@ -31,7 +31,7 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button type="button" label="Emails" badge="8" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" class="p-button-outlined" />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="8" badgeClass="p-badge-danger" outlined />
     </div>
 </template>
 
diff --git a/doc/card/AdvancedDoc.vue b/doc/card/AdvancedDoc.vue
index 49d5fd310..6cf2d64ad 100644
--- a/doc/card/AdvancedDoc.vue
+++ b/doc/card/AdvancedDoc.vue
@@ -17,7 +17,7 @@
             </template>
             <template #footer>
                 <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: 0.5em" />
+                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
             </template>
         </Card>
     </div>
@@ -44,7 +44,7 @@ export default {
     </template>
     <template #footer>
         <Button icon="pi pi-check" label="Save" />
-        <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: 0.5em" />
+        <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
     </template>
 </Card>`,
                 options: `
@@ -64,7 +64,7 @@ export default {
             </template>
             <template #footer>
                 <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: 0.5em" />
+                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
             </template>
         </Card>
     </div>
@@ -89,7 +89,7 @@ export default {
             </template>
             <template #footer>
                 <Button icon="pi pi-check" label="Save" />
-                <Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: 0.5em" />
+                <Button icon="pi pi-times" label="Cancel" severity="secondary" style="margin-left: 0.5em" />
             </template>
         </Card>
     </div>
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index b37f7ce03..de5c310df 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -15,9 +15,8 @@
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
                         </div>
                     </div>
                 </div>
@@ -64,9 +63,8 @@ export default {
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                 <div class="mt-5">
-                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" 
                 </div>
             </div>
         </div>
@@ -86,9 +84,8 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
                         </div>
                     </div>
                 </div>
@@ -159,9 +156,8 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index 4081dba2b..8594ff9dd 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -15,9 +15,9 @@
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -64,9 +64,9 @@ export default {
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                 <div class="mt-5">
-                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                    <Button icon="pi pi-cog" rounded severity="help" />
                 </div>
             </div>
         </div>
@@ -86,9 +86,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -159,9 +159,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/carousel/NumScrollDoc.vue b/doc/carousel/NumScrollDoc.vue
index 09dd9e7da..7ee516a6d 100644
--- a/doc/carousel/NumScrollDoc.vue
+++ b/doc/carousel/NumScrollDoc.vue
@@ -15,9 +15,9 @@
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -64,9 +64,9 @@ export default {
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                 <div class="mt-5">
-                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                    <Button icon="pi pi-cog" rounded severity="help" />
                 </div>
             </div>
         </div>
@@ -86,9 +86,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -159,9 +159,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index 0dd1b3fcd..0616e66c1 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -18,9 +18,9 @@
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -67,9 +67,9 @@ export default {
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                 <div class="mt-5">
-                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                    <Button icon="pi pi-cog" rounded severity="help" />
                 </div>
             </div>
         </div>
@@ -89,9 +89,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -162,9 +162,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index b4832cd16..f9a7f62e4 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -15,9 +15,9 @@
                         <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -65,9 +65,9 @@ export default {
                 <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                 <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                 <div class="mt-5">
-                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                    <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                    <Button icon="pi pi-search" rounded class="mr-2" />
+                    <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                    <Button icon="pi pi-cog" rounded severity="help" />
                 </div>
             </div>
         </div>
@@ -88,9 +88,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
@@ -162,9 +162,9 @@ export default {
                         <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
                         <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
                         <div class="mt-5">
-                            <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
-                            <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
-                            <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
+                            <Button icon="pi pi-search" rounded class="mr-2" />
+                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
+                            <Button icon="pi pi-cog" rounded severity="help" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/confirmdialog/PositionDoc.vue b/doc/confirmdialog/PositionDoc.vue
index bc030894c..ed1652971 100644
--- a/doc/confirmdialog/PositionDoc.vue
+++ b/doc/confirmdialog/PositionDoc.vue
@@ -5,18 +5,18 @@
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -30,18 +30,18 @@ export default {
                 basic: `
 <ConfirmDialog group="positionDialog"></ConfirmDialog>
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
-    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
 </div>
 <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
-    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
-    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
+    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
 </div>
 <div class="flex flex-wrap justify-content-center gap-2">
-    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
-    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
-    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
+    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
+    <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
 </div>`,
                 options: `
 <template>
@@ -49,18 +49,18 @@ export default {
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
         </div>
     </div>
 </template>
@@ -92,18 +92,18 @@ export default {
     <ConfirmDialog group="positionDialog"></ConfirmDialog>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
-            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
+            <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="help" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="help" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2 mb-2">
-            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
-            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
+            <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="warning" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" severity="warning" style="min-width: 10rem"></Button>
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
-            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
+            <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="success" style="min-width: 10rem"></Button>
+            <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" severity="success" style="min-width: 10rem"></Button>
         </div>
     </div>
 </template>
diff --git a/doc/confirmpopup/BasicDoc.vue b/doc/confirmpopup/BasicDoc.vue
index db4bfcf3d..111be2061 100644
--- a/doc/confirmpopup/BasicDoc.vue
+++ b/doc/confirmpopup/BasicDoc.vue
@@ -5,7 +5,7 @@
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -19,7 +19,7 @@ export default {
 <ConfirmPopup></ConfirmPopup>
 <div class="card flex flex-wrap gap-2 justify-content-center">
     <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-    <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+    <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
 </div>`,
                 options: `
 <template>
@@ -27,7 +27,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
     </div>
 </template>
 
@@ -70,7 +70,7 @@ export default {
     <ConfirmPopup></ConfirmPopup>
     <div class="card flex flex-wrap gap-2 justify-content-center">
         <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm"></Button>
-        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
+        <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" outlined severity="danger"></Button>
     </div>
 </template>
 
diff --git a/doc/datatable/RowExpansionDoc.vue b/doc/datatable/RowExpansionDoc.vue
index 58234c371..6c8075233 100644
--- a/doc/datatable/RowExpansionDoc.vue
+++ b/doc/datatable/RowExpansionDoc.vue
@@ -13,8 +13,8 @@
         <DataTable v-model:expandedRows="expandedRows" :value="products" dataKey="id" @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
             <template #header>
                 <div class="flex flex-wrap justify-content-end gap-2">
-                    <Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                    <Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
             </template>
             <Column expander style="width: 5rem" />
@@ -84,8 +84,8 @@ export default {
         @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
     <template #header>
         <div class="flex flex-wrap justify-content-end gap-2">
-            <Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-            <Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+            <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+            <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
         </div>
     </template>
     <Column expander style="width: 5rem" />
@@ -144,8 +144,8 @@ export default {
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
             <template #header>
                 <div class="flex flex-wrap justify-content-end gap-2">
-                    <Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                    <Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
             </template>
             <Column expander style="width: 5rem" />
@@ -273,8 +273,8 @@ export default {
                 @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" tableStyle="min-width: 60rem">
             <template #header>
                 <div class="flex flex-wrap justify-content-end gap-2">
-                    <Button class="p-button-text" icon="pi pi-plus" label="Expand All" @click="expandAll" />
-                    <Button class="p-button-text" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+                    <Button text icon="pi pi-plus" label="Expand All" @click="expandAll" />
+                    <Button text icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
             </template>
             <Column expander style="width: 5rem" />
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index d79b6e6fe..11c5cc745 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -7,7 +7,7 @@
             <template #header>
                 <div class="flex flex-wrap align-items-center justify-content-between gap-2">
                     <span class="text-xl text-900 font-bold">Products</span>
-                    <Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" />
+                    <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
             <Column field="name" header="Name"></Column>
@@ -51,7 +51,7 @@ export default {
     <template #header>
         <div class="flex flex-wrap align-items-center justify-content-between gap-2">
             <span class="text-xl text-900 font-bold">Products</span>
-            <Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" />
+            <Button icon="pi pi-refresh" rounded raised />
         </div>
     </template>
     <Column field="name" header="Name"></Column>
@@ -85,7 +85,7 @@ export default {
             <template #header>
                 <div class="flex flex-wrap align-items-center justify-content-between gap-2">
                     <span class="text-xl text-900 font-bold">Products</span>
-                    <Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" />
+                    <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
             <Column field="name" header="Name"></Column>
@@ -156,7 +156,7 @@ export default {
             <template #header>
                 <div class="flex flex-wrap align-items-center justify-content-between gap-2">
                     <span class="text-xl text-900 font-bold">Products</span>
-                    <Button icon="pi pi-refresh" class="p-button-rounded p-button-raised" />
+                    <Button icon="pi pi-refresh" rounded raised />
                 </div>
             </template>
             <Column field="name" header="Name"></Column>
diff --git a/doc/datatable/filter/AdvancedFilterDoc.vue b/doc/datatable/filter/AdvancedFilterDoc.vue
index eb1ef88e1..cb3617cef 100644
--- a/doc/datatable/filter/AdvancedFilterDoc.vue
+++ b/doc/datatable/filter/AdvancedFilterDoc.vue
@@ -6,7 +6,7 @@
         <DataTable v-model:filters="filters" :value="customers" paginator showGridlines :rows="10" dataKey="id" filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -34,10 +34,10 @@
                     <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
                 </template>
                 <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
                 </template>
                 <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                 </template>
                 <template #filterfooter>
                     <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@@ -144,7 +144,7 @@ export default {
         filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
-            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
             <span class="p-input-icon-left">
                 <i class="pi pi-search" />
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -172,10 +172,10 @@ export default {
             <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
         </template>
         <template #filterclear="{ filterCallback }">
-            <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+            <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
         </template>
         <template #filterapply="{ filterCallback }">
-            <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+            <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
         </template>
         <template #filterfooter>
             <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@@ -256,7 +256,7 @@ export default {
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -284,10 +284,10 @@ export default {
                     <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
                 </template>
                 <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
                 </template>
                 <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                 </template>
                 <template #filterfooter>
                     <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
@@ -460,7 +460,7 @@ export default {
                 filterDisplay="menu" :loading="loading" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -488,10 +488,10 @@ export default {
                     <InputText v-model="filterModel.value" type="text" class="p-column-filter" placeholder="Search by country" />
                 </template>
                 <template #filterclear="{ filterCallback }">
-                    <Button type="button" icon="pi pi-times" @click="filterCallback()" class="p-button-secondary"></Button>
+                    <Button type="button" icon="pi pi-times" @click="filterCallback()" severity="secondary"></Button>
                 </template>
                 <template #filterapply="{ filterCallback }">
-                    <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
+                    <Button type="button" icon="pi pi-check" @click="filterCallback()" severity="success"></Button>
                 </template>
                 <template #filterfooter>
                     <div class="px-3 pt-0 pb-3 text-center">Customized Buttons</div>
diff --git a/doc/datatable/paginator/PaginatorTemplateDoc.vue b/doc/datatable/paginator/PaginatorTemplateDoc.vue
index 20b1b9ded..2643f9291 100644
--- a/doc/datatable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/datatable/paginator/PaginatorTemplateDoc.vue
@@ -16,10 +16,10 @@
             tableStyle="min-width: 50rem"
         >
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
             <Column field="name" header="Name" style="width: 25%"></Column>
             <Column field="country.name" header="Country" style="width: 25%"></Column>
@@ -43,10 +43,10 @@ export default {
         paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
         currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
-        <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+        <Button type="button" icon="pi pi-refresh" text />
     </template>
     <template #paginatorend>
-        <Button type="button" icon="pi pi-download" class="p-button-text" />
+        <Button type="button" icon="pi pi-download" text />
     </template>
     <Column field="name" header="Name" style="width: 25%"></Column>
     <Column field="country.name" header="Country" style="width: 25%"></Column>
@@ -60,10 +60,10 @@ export default {
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
                 currentPageReportTemplate="{first} to {last} of {totalRecords}">
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
             <Column field="name" header="Name" style="width: 25%"></Column>
             <Column field="country.name" header="Country" style="width: 25%"></Column>
@@ -94,10 +94,10 @@ export default {
                 paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
                 currentPageReportTemplate="{first} to {last} of {totalRecords}">
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
             <Column field="name" header="Name" style="width: 25%"></Column>
             <Column field="country.name" header="Country" style="width: 25%"></Column>
diff --git a/doc/datatable/samples/CustomersDoc.vue b/doc/datatable/samples/CustomersDoc.vue
index 5f617b0f4..c5fb215cc 100644
--- a/doc/datatable/samples/CustomersDoc.vue
+++ b/doc/datatable/samples/CustomersDoc.vue
@@ -6,7 +6,7 @@
         <DataTable v-model:filters="filters" v-model:selection="selectedCustomers" :value="customers" paginator :rows="10" dataKey="id" filterDisplay="menu" :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -94,7 +94,7 @@
             </Column>
             <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body>
-                    <Button type="button" icon="pi pi-cog" class="p-button-rounded" />
+                    <Button type="button" icon="pi pi-cog" rounded />
                 </template>
             </Column>
         </DataTable>
@@ -131,7 +131,7 @@ export default {
     :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
     <template #header>
         <div class="flex justify-content-between">
-            <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+            <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
             <span class="p-input-icon-left">
                 <i class="pi pi-search" />
                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -219,7 +219,7 @@ export default {
     </Column>
     <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
         <template #body>
-            <Button type="button" icon="pi pi-cog" class="p-button-rounded" />
+            <Button type="button" icon="pi pi-cog" rounded />
         </template>
     </Column>
 </DataTable>`,
@@ -230,7 +230,7 @@ export default {
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -318,7 +318,7 @@ export default {
             </Column>
             <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body>
-                    <Button type="button" icon="pi pi-cog" class="p-button-rounded" />
+                    <Button type="button" icon="pi pi-cog" rounded />
                 </template>
             </Column>
         </DataTable>
@@ -420,7 +420,7 @@ export default {
             :globalFilterFields="['name', 'country.name', 'representative.name', 'balance', 'status']">
             <template #header>
                 <div class="flex justify-content-between">
-                    <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter()" />
+                    <Button type="button" icon="pi pi-filter-slash" label="Clear" outlined @click="clearFilter()" />
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -508,7 +508,7 @@ export default {
             </Column>
             <Column headerStyle="width: 5rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                 <template #body>
-                    <Button type="button" icon="pi pi-cog" class="p-button-rounded" />
+                    <Button type="button" icon="pi pi-cog" rounded />
                 </template>
             </Column>
         </DataTable>
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 22a585cb5..5fa218476 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -5,13 +5,13 @@
     <div class="card">
         <Toolbar class="mb-4">
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                <Button label="New" icon="pi pi-plus" severity="success" class="mr-2" @click="openNew" />
+                <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
             </template>
 
             <template #end>
                 <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
-                <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)" />
+                <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)" />
             </template>
         </Toolbar>
 
@@ -63,8 +63,8 @@
             </Column>
             <Column :exportable="false" style="min-width: 12rem">
                 <template #body="slotProps">
-                    <Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" />
-                    <Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" />
+                    <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                    <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
                 </template>
             </Column>
         </DataTable>
@@ -132,8 +132,8 @@
             </div>
         </div>
         <template #footer>
-            <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
-            <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
+            <Button label="Cancel" icon="pi pi-times" text @click="hideDialog" />
+            <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
         </template>
     </Dialog>
 
@@ -146,8 +146,8 @@
             >
         </div>
         <template #footer>
-            <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false" />
-            <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+            <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false" />
+            <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
         </template>
     </Dialog>
 
@@ -157,8 +157,8 @@
             <span v-if="product">Are you sure you want to delete the selected products?</span>
         </div>
         <template #footer>
-            <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false" />
-            <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+            <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false" />
+            <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
         </template>
     </Dialog>
 
@@ -189,12 +189,12 @@ export default {
                 basic: `
 <Toolbar class="mb-4">
     <template #start>
-        <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-        <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+        <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+        <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
     </template>
     <template #end>
         <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
-        <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
+        <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)"  />
     </template>
 </Toolbar>
 <DataTable ref="dt" :value="products" v-model:selection="selectedProducts" dataKey="id" 
@@ -236,8 +236,8 @@ export default {
     </Column>
     <Column :exportable="false" style="min-width:8rem">
         <template #body="slotProps">
-            <Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" />
-            <Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" />
+            <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+            <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
         </template>
     </Column>
 </DataTable>`,
@@ -247,13 +247,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
                     <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
-                    <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
+                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)"  />
                 </template>
             </Toolbar>
 
@@ -297,8 +297,8 @@ export default {
                 </Column>
                 <Column :exportable="false" style="min-width:8rem">
                     <template #body="slotProps">
-                        <Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" />
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
                     </template>
                 </Column>
             </DataTable>
@@ -366,8 +366,8 @@ export default {
                 </div>
             </div>
             <template #footer>
-                <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
-                <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
+                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
+                <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
             </template>
         </Dialog>
 
@@ -377,8 +377,8 @@ export default {
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
-                <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/>
-                <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false"/>
+                <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
             </template>
         </Dialog>
 
@@ -388,8 +388,8 @@ export default {
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
-                <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/>
-                <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false"/>
+                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
             </template>
         </Dialog>
 	</div>
@@ -535,13 +535,13 @@ export default {
         <div class="card">
             <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
-                    <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
+                    <Button label="New" icon="pi pi-plus" severity="success" class="mr-2 @click="openNew" />
+                    <Button label="Delete" icon="pi pi-trash" severity="danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
                     <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
-                    <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
+                    <Button label="Export" icon="pi pi-upload" severity="help" @click="exportCSV($event)"  />
                 </template>
             </Toolbar>
 
@@ -585,8 +585,8 @@ export default {
                 </Column>
                 <Column :exportable="false" style="min-width:8rem">
                     <template #body="slotProps">
-                        <Button icon="pi pi-pencil" class="p-button-icon-only p-button-outlined p-button-rounded mr-2" @click="editProduct(slotProps.data)" />
-                        <Button icon="pi pi-trash" class="p-button-icon-only p-button-outlined p-button-rounded p-button-danger" @click="confirmDeleteProduct(slotProps.data)" />
+                        <Button icon="pi pi-pencil" outlined rounded class="mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-trash" outlined rounded severity="danger" @click="confirmDeleteProduct(slotProps.data)" />
                     </template>
                 </Column>
             </DataTable>
@@ -654,8 +654,8 @@ export default {
                 </div>
             </div>
             <template #footer>
-                <Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
-                <Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveProduct" />
+                <Button label="Cancel" icon="pi pi-times" text @click="hideDialog"/>
+                <Button label="Save" icon="pi pi-check" text @click="saveProduct" />
             </template>
         </Dialog>
 
@@ -665,8 +665,8 @@ export default {
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
-                <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/>
-                <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
+                <Button label="No" icon="pi pi-times" text @click="deleteProductDialog = false"/>
+                <Button label="Yes" icon="pi pi-check" text @click="deleteProduct" />
             </template>
         </Dialog>
 
@@ -676,8 +676,8 @@ export default {
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
-                <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/>
-                <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
+                <Button label="No" icon="pi pi-times" text @click="deleteProductsDialog = false"/>
+                <Button label="Yes" icon="pi pi-check" text @click="deleteSelectedProducts" />
             </template>
         </Dialog>
 	</div>
diff --git a/doc/datatable/scroll/FrozenRowsDoc.vue b/doc/datatable/scroll/FrozenRowsDoc.vue
index 7c666fa60..d9989afd2 100644
--- a/doc/datatable/scroll/FrozenRowsDoc.vue
+++ b/doc/datatable/scroll/FrozenRowsDoc.vue
@@ -10,7 +10,7 @@
             <Column field="status" header="Status"></Column>
             <Column style="flex: 0 0 4rem">
                 <template #body="{ data, frozenRow, index }">
-                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" />
+                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
                 </template>
             </Column>
         </DataTable>
@@ -52,7 +52,7 @@ export default {
     <Column field="status" header="Status"></Column>
     <Column style="flex: 0 0 4rem">
         <template #body="{ data, frozenRow, index }">
-            <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" />
+            <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
         </template>
     </Column>
 </DataTable>`,
@@ -66,7 +66,7 @@ export default {
             <Column field="status" header="Status"></Column>
             <Column style="flex: 0 0 4rem">
                 <template #body="{ data, frozenRow, index }">
-                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" />
+                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
                 </template>
             </Column>
         </DataTable>
@@ -132,7 +132,7 @@ export default {
             <Column field="status" header="Status"></Column>
             <Column style="flex: 0 0 4rem">
                 <template #body="{ data, frozenRow, index }">
-                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" class="p-button-sm p-button-text" @click="toggleLock(data, frozenRow, index)" />
+                    <Button type="button" :icon="frozenRow ? 'pi pi-lock-open' : 'pi pi-lock'" :disabled="frozenRow ? false : lockedCustomers.length >= 2" text size="small" @click="toggleLock(data, frozenRow, index)" />
                 </template>
             </Column>
         </DataTable>
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 8552932c5..d9aaccb0e 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -24,7 +24,7 @@
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -63,7 +63,7 @@ export default {
                     </div>
                     <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                         <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                        <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </div>
                 </div>
             </div>
@@ -92,7 +92,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -155,7 +155,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index d095baea6..2cf61aaee 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -31,7 +31,7 @@
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -55,7 +55,7 @@
                         </div>
                         <div class="flex align-items-center justify-content-between">
                             <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                            <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </div>
                     </div>
                 </div>
@@ -100,7 +100,7 @@ export default {
                     </div>
                     <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                         <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                        <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </div>
                 </div>
             </div>
@@ -124,7 +124,7 @@ export default {
                 </div>
                 <div class="flex align-items-center justify-content-between">
                     <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                    <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                    <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                 </div>
             </div>
         </div>
@@ -158,7 +158,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -182,7 +182,7 @@ export default {
                         </div>
                         <div class="flex align-items-center justify-content-between">
                             <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                            <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </div>
                     </div>
                 </div>
@@ -251,7 +251,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -275,7 +275,7 @@ export default {
                         </div>
                         <div class="flex align-items-center justify-content-between">
                             <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                            <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                            <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                         </div>
                     </div>
                 </div>
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index d7bd61252..b9c544c86 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -22,7 +22,7 @@
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -61,7 +61,7 @@ export default {
                     </div>
                     <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                         <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                        <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </div>
                 </div>
             </div>
@@ -90,7 +90,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -153,7 +153,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index 4327eff32..d40455fa7 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -25,7 +25,7 @@
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -74,7 +74,7 @@ export default {
                     </div>
                     <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                         <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                        <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                        <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                     </div>
                 </div>
             </div>
@@ -106,7 +106,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
@@ -193,7 +193,7 @@ export default {
                             </div>
                             <div class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2">
                                 <span class="text-2xl font-semibold">\${{ slotProps.data.price }}</span>
-                                <Button icon="pi pi-shopping-cart" class="p-button-rounded" :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
+                                <Button icon="pi pi-shopping-cart" rounded :disabled="slotProps.data.inventoryStatus === 'OUTOFSTOCK'"></Button>
                             </div>
                         </div>
                     </div>
diff --git a/doc/dialog/FooterDoc.vue b/doc/dialog/FooterDoc.vue
index 88ea7f1c9..304d99753 100644
--- a/doc/dialog/FooterDoc.vue
+++ b/doc/dialog/FooterDoc.vue
@@ -12,7 +12,7 @@
             </p>
 
             <template #footer>
-                <Button label="No" icon="pi pi-times" @click="visible = false" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
@@ -35,7 +35,7 @@ export default {
         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" class="p-button-text" />
+        <Button label="No" icon="pi pi-times" @click="visible = false" text />
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
@@ -49,7 +49,7 @@ export default {
                 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" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
@@ -75,7 +75,7 @@ export default {
                 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" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
diff --git a/doc/dialog/PositionDoc.vue b/doc/dialog/PositionDoc.vue
index f8de56583..e68315f38 100644
--- a/doc/dialog/PositionDoc.vue
+++ b/doc/dialog/PositionDoc.vue
@@ -4,18 +4,18 @@
     </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')" class="p-button-help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
+            <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" />
         </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')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
+            <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" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
+            <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" />
         </div>
 
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@@ -24,7 +24,7 @@
                 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" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
@@ -41,18 +41,18 @@ 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')" class="p-button-help" style="min-width: 10rem" />
-    <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
+    <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" />
 </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')" class="p-button-warning" style="min-width: 10rem" />
-    <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
-    <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
+    <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" />
 </div>
 <div class="flex flex-wrap justify-content-center gap-2">
-    <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
-    <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
-    <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
+    <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" />
 </div>
 
 <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@@ -61,7 +61,7 @@ export default {
         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" class="p-button-text" />
+        <Button label="No" icon="pi pi-times" @click="visible = false" text />
         <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
     </template>
 </Dialog>`,
@@ -69,18 +69,18 @@ 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')" class="p-button-help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
+            <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" />
         </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')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
+            <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" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
+            <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" />
         </div>
 
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@@ -89,7 +89,7 @@ export default {
                 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" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
@@ -116,18 +116,18 @@ 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')" class="p-button-help" style="min-width: 10rem" />
-            <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-help" style="min-width: 10rem" />
+            <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" />
         </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')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" style="min-width: 10rem" />
-            <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" style="min-width: 10rem" />
+            <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" />
         </div>
         <div class="flex flex-wrap justify-content-center gap-2">
-            <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-success" style="min-width: 10rem" />
-            <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-success" style="min-width: 10rem" />
+            <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" />
         </div>
 
         <Dialog v-model:visible="visible" header="Header" :style="{ width: '50vw' }" :position="position" :modal="true" :draggable="false">
@@ -136,7 +136,7 @@ export default {
                 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" class="p-button-text" />
+                <Button label="No" icon="pi pi-times" @click="visible = false" text />
                 <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
             </template>
         </Dialog>
diff --git a/doc/divider/LoginDoc.vue b/doc/divider/LoginDoc.vue
index 55ee072d1..2ea41db9e 100644
--- a/doc/divider/LoginDoc.vue
+++ b/doc/divider/LoginDoc.vue
@@ -20,7 +20,7 @@
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button>
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
             </div>
         </div>
     </div>
@@ -50,7 +50,7 @@ export default {
         <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
     </div>
     <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-        <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button>
+        <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
     </div>
 </div>`,
                 options: `
@@ -73,7 +73,7 @@ export default {
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button>
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
             </div>
         </div>
     </div>
@@ -101,7 +101,7 @@ export default {
                 <Divider layout="horizontal" class="flex md:hidden" align="center"><b>OR</b></Divider>
             </div>
             <div class="w-full md:w-5 flex align-items-center justify-content-center py-5">
-                <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success w-10rem"></Button>
+                <Button label="Sign Up" icon="pi pi-user-plus" severity="success" class="w-10rem"></Button>
             </div>
         </div>
     </div>
diff --git a/doc/dynamicdialog/BasicDoc.vue b/doc/dynamicdialog/BasicDoc.vue
index 30d13a3e4..1fe7d326d 100644
--- a/doc/dynamicdialog/BasicDoc.vue
+++ b/doc/dynamicdialog/BasicDoc.vue
@@ -150,7 +150,7 @@ const showProducts = () => {
 <template>
 	<div>
         <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
 			<Column field="code" header="Code"></Column>
@@ -164,7 +164,7 @@ const showProducts = () => {
 			<Column field="quantity" header="Quantity"></Column>
             <Column style="width:5rem">
                 <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
                 </template>
             </Column>
 		</DataTable>
@@ -244,7 +244,7 @@ export default {
 <template>
 	<div>
         <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
 			<Column field="code" header="Code"></Column>
@@ -258,7 +258,7 @@ export default {
 			<Column field="quantity" header="Quantity"></Column>
             <Column style="width:5rem">
                 <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
                 </template>
             </Column>
 		</DataTable>
diff --git a/doc/dynamicdialog/demo/ProductListDemo.vue b/doc/dynamicdialog/demo/ProductListDemo.vue
index e77448c5d..432914505 100644
--- a/doc/dynamicdialog/demo/ProductListDemo.vue
+++ b/doc/dynamicdialog/demo/ProductListDemo.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div class="flex justify-content-end mt-1 mb-3">
-            <Button icon="pi pi-external-link" label="Nested Dialog" class="p-button-outlined p-button-success" @click="showInfo" />
+            <Button icon="pi pi-external-link" label="Nested Dialog" outlined severity="success" @click="showInfo" />
         </div>
         <DataTable :value="products">
             <Column field="code" header="Code"></Column>
@@ -15,7 +15,7 @@
             <Column field="quantity" header="Quantity"></Column>
             <Column style="width: 5rem">
                 <template #body="slotProps">
-                    <Button type="button" icon="pi pi-plus" class="p-button-text p-button-rounded" @click="selectProduct(slotProps.data)"></Button>
+                    <Button type="button" icon="pi pi-plus" text rounded @click="selectProduct(slotProps.data)"></Button>
                 </template>
             </Column>
         </DataTable>
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index 9cd7bb950..abd089148 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -7,9 +7,9 @@
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
                 <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
                     <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]">
                         <span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span>
@@ -27,7 +27,7 @@
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Pending" severity="warning" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded severity="danger" />
                         </div>
                     </div>
                 </div>
@@ -42,7 +42,7 @@
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Completed" class="mt-3" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded severity="danger" />
                         </div>
                     </div>
                 </div>
@@ -71,9 +71,9 @@ export default {
     <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
         <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
             <div class="flex gap-2">
-                <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
-                <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
-                <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
             </div>
             <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
                 ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@@ -91,7 +91,7 @@ export default {
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
                     <Badge value="Pending" severity="warning" />
-                    <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                    <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                 </div>
             </div>
         </div>
@@ -106,7 +106,7 @@ export default {
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
                     <Badge value="Completed" class="mt-3" severity="success" />
-                    <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                    <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                 </div>
             </div>
         </div>
@@ -126,9 +126,9 @@ export default {
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
                 <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
                     <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
                         ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@@ -146,7 +146,7 @@ export default {
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Pending" severity="warning" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
@@ -161,7 +161,7 @@ export default {
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Completed" class="mt-3" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
@@ -232,9 +232,9 @@ export default {
             <template #header="{ chooseCallback, uploadCallback, clearCallback, files }">
                 <div class="flex flex-wrap justify-content-between align-items-center flex-1 gap-2">
                     <div class="flex gap-2">
-                        <Button @click="chooseCallback()" icon="pi pi-images" class="p-button-rounded"></Button>
-                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" class="p-button-rounded p-button-success" :disabled="!files || files.length === 0"></Button>
-                        <Button @click="clearCallback()" icon="pi pi-times" class="p-button-rounded p-button-danger" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="chooseCallback()" icon="pi pi-images" rounded outlined></Button>
+                        <Button @click="uploadEvent(uploadCallback)" icon="pi pi-cloud-upload" rounded outlined severity="success" :disabled="!files || files.length === 0"></Button>
+                        <Button @click="clearCallback()" icon="pi pi-times" rounded outlined severity="danger" :disabled="!files || files.length === 0"></Button>
                     </div>
                     <ProgressBar :value="totalSizePercent" :showValue="false" :class="['md:w-20rem h-1rem w-full md:ml-auto', { 'exceeded-progress-bar': totalSizePercent > 100 }]"
                         ><span class="white-space-nowrap">{{ totalSize }}B / 1Mb</span></ProgressBar
@@ -252,7 +252,7 @@ export default {
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Pending" severity="warning" />
-                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="onRemoveTemplatingFile(file, removeFileCallback, index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
@@ -267,7 +267,7 @@ export default {
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
                             <Badge value="Completed" class="mt-3" severity="success" />
-                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" class="p-button-outlined p-button-danger p-button-rounded" />
+                            <Button icon="pi pi-times" @click="removeUploadedFileCallback(index)" outlined rounded  severity="danger" />
                         </div>
                     </div>
                 </div>
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index eedbf3e7d..ce6f75cc7 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" />
+            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
 
         <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@@ -46,7 +46,7 @@ export default {
                 basic: `
 <div>
     <Button icon="pi pi-minus" @click="prev" />
-    <Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" />
+    <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
 </div>
 
 <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@@ -62,7 +62,7 @@ export default {
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" />
+            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
 
         <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
@@ -118,7 +118,7 @@ export default {
     <div class="card flex flex-column md:align-items-center">
         <div class="mb-3 align-self-center">
             <Button icon="pi pi-minus" @click="prev" />
-            <Button icon="pi pi-plus" @click="next" class="p-button-secondary ml-2" />
+            <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
 
         <Galleria v-model:activeIndex="activeIndex" :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
diff --git a/doc/inputgroup/ButtonDoc.vue b/doc/inputgroup/ButtonDoc.vue
index 68302616d..51beacbc6 100644
--- a/doc/inputgroup/ButtonDoc.vue
+++ b/doc/inputgroup/ButtonDoc.vue
@@ -10,13 +10,13 @@
 
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" class="p-button-warning" />
+            <Button icon="pi pi-search" severity="warning" />
         </div>
 
         <div class="p-inputgroup flex-1">
-            <Button icon="pi pi-check" class="p-button-success" />
+            <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" class="p-button-danger" />
+            <Button icon="pi pi-times" severity="danger" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -35,13 +35,13 @@ export default {
 
 <div class="p-inputgroup flex-1">
     <InputText placeholder="Keyword" />
-    <Button icon="pi pi-search" class="p-button-warning" />
+    <Button icon="pi pi-search" severity="warning" />
 </div>
 
 <div class="p-inputgroup flex-1">
-    <Button icon="pi pi-check" class="p-button-success" />
+    <Button icon="pi pi-check" severity="success" />
     <InputText placeholder="Vote" />
-    <Button icon="pi pi-times" class="p-button-danger" />
+    <Button icon="pi pi-times" severity="danger" />
 </div>`,
                 options: `
 <template>
@@ -53,13 +53,13 @@ export default {
 
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" class="p-button-warning" />
+            <Button icon="pi pi-search" severity="warning" />
         </div>
 
         <div class="p-inputgroup flex-1">
-            <Button icon="pi pi-check" class="p-button-success" />
+            <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" class="p-button-danger" />
+            <Button icon="pi pi-times" severity="danger" />
         </div>
     </div>
 </template>`,
@@ -73,13 +73,13 @@ export default {
 
         <div class="p-inputgroup flex-1">
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" class="p-button-warning" />
+            <Button icon="pi pi-search" severity="warning" />
         </div>
 
         <div class="p-inputgroup flex-1">
-            <Button icon="pi pi-check" class="p-button-success" />
+            <Button icon="pi pi-check" severity="success" />
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" class="p-button-danger" />
+            <Button icon="pi pi-times" severity="danger" />
         </div>
     </div>
 </template>`
diff --git a/doc/message/DynamicDoc.vue b/doc/message/DynamicDoc.vue
index 00314cedc..72d5ed3ee 100644
--- a/doc/message/DynamicDoc.vue
+++ b/doc/message/DynamicDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card">
         <Button label="Show" @click="addMessages()" />
-        <Button label="Clear" class="p-button-secondary ml-2" @click="clearMessages()" />
+        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
         <transition-group name="p-message" tag="div">
             <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
         </transition-group>
@@ -20,11 +20,19 @@ export default {
             count: 0,
             code: {
                 basic: `
-<Message>Message Content</Message>`,
+<Button label="Show" @click="addMessages()" />
+<Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
+<transition-group name="p-message" tag="div">
+    <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+</transition-group>`,
                 options: `
 <template>
     <div class="card">
-        <Message>Message Content</Message>
+        <Button label="Show" @click="addMessages()" />
+        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
+        <transition-group name="p-message" tag="div">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+        </transition-group>
     </div>
 </template>
 
@@ -54,7 +62,11 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Message>Message Content</Message>
+        <Button label="Show" @click="addMessages()" />
+        <Button label="Clear" severity="secondary" class="ml-2" @click="clearMessages()" />
+        <transition-group name="p-message" tag="div">
+            <Message v-for="msg of messages" :key="msg.id" :severity="msg.severity">{{ msg.content }}</Message>
+        </transition-group>
     </div>
 </template>
 
diff --git a/doc/tabmenu/ControlledDoc.vue b/doc/tabmenu/ControlledDoc.vue
index dbb475ad3..e182f0f3c 100644
--- a/doc/tabmenu/ControlledDoc.vue
+++ b/doc/tabmenu/ControlledDoc.vue
@@ -3,7 +3,7 @@
         <p>Visibility of the content is specified with the <i>activeIndex</i> property that supports one or two-way binding.</p>
     </DocSectionText>
     <div class="card">
-        <Button @click="active = 0" class="p-button-text mb-2" label="Activate 1st" />
+        <Button @click="active = 0" text outlined class="mb-2" label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
     <DocSectionCode :code="code" />
@@ -38,12 +38,12 @@ export default {
             ],
             code: {
                 basic: `
-<Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+<Button @click="active = 0" text outlined label="Activate 1st" />
 <TabMenu v-model:activeIndex="active" :model="items" />`,
                 options: `
 <template>
     <div class="card">
-        <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+        <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
@@ -82,7 +82,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
+        <Button @click="active = 0" text outlined label="Activate 1st" />
         <TabMenu v-model:activeIndex="active" :model="items" />
     </div>
 </template>
diff --git a/doc/tabview/ControlledDoc.vue b/doc/tabview/ControlledDoc.vue
index 057cdd157..3d9c375c9 100644
--- a/doc/tabview/ControlledDoc.vue
+++ b/doc/tabview/ControlledDoc.vue
@@ -4,9 +4,9 @@
     </DocSectionText>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active1 = 0" text label="Activate 1st" />
+            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -41,9 +41,9 @@ export default {
             code: {
                 basic: `
 <div class="py-2">
-    <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-    <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
-    <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
+    <Button @click="active1 = 0" text label="Activate 1st" />
+    <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
+    <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
 </div>
 
 <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -71,9 +71,9 @@ export default {
 <template>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active1 = 0" text label="Activate 1st" />
+            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -113,9 +113,9 @@ export default {
 <template>
     <div class="card">
         <div class="py-2">
-            <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
-            <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
+            <Button @click="active1 = 0" text label="Activate 1st" />
+            <Button @click="active1 = 1" text class="mr-2" label="Activate 2nd" />
+            <Button @click="active1 = 2" text class="mr-2" label="Activate 3rd" />
         </div>
 
         <TabView ref="tabview2" v-model:activeIndex="active1">
diff --git a/doc/theming/PrimeFlexDoc.vue b/doc/theming/PrimeFlexDoc.vue
index be2926e9d..bcbfbb3b6 100644
--- a/doc/theming/PrimeFlexDoc.vue
+++ b/doc/theming/PrimeFlexDoc.vue
@@ -10,8 +10,8 @@
     </DocSectionText>
     <div class="card flex flex-column md:flex-row md:justify-content-between row-gap-3">
         <Button type="button" label="Button 1"></Button>
-        <Button type="button" label="Button 2" class="p-button-secondary"></Button>
-        <Button type="button" label="Button 3" class="p-button-help"></Button>
+        <Button type="button" label="Button 2" severity="secondary"></Button>
+        <Button type="button" label="Button 3" severity="help"></Button>
     </div>
     <DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
 </template>
@@ -24,8 +24,8 @@ export default {
                 basic: `
 <div class="flex flex-column md:flex-row md:justify-content-between row-gap-3">
     <Button type="button" label="Button 1"></Button>
-    <Button type="button" label="Button 2" class="p-button-secondary"></Button>
-    <Button type="button" label="Button 3" class="p-button-help"></Button>
+    <Button type="button" label="Button 2" severity="secondary"></Button>
+    <Button type="button" label="Button 3" severity="help"></Button>
 </div>`
             }
         };
diff --git a/doc/timeline/TemplateDoc.vue b/doc/timeline/TemplateDoc.vue
index c4e7ef052..01c005e42 100644
--- a/doc/timeline/TemplateDoc.vue
+++ b/doc/timeline/TemplateDoc.vue
@@ -23,7 +23,7 @@
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
                         </p>
-                        <Button label="Read more" class="p-button-text"></Button>
+                        <Button label="Read more" text></Button>
                     </template>
                 </Card>
             </template>
@@ -64,7 +64,7 @@ export default {
                     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                     neque quas!
                 </p>
-                <Button label="Read more" class="p-button-text"></Button>
+                <Button label="Read more" text></Button>
             </template>
         </Card>
     </template>
@@ -92,7 +92,7 @@ export default {
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
                         </p>
-                        <Button label="Read more" class="p-button-text"></Button>
+                        <Button label="Read more" text></Button>
                     </template>
                 </Card>
             </template>
@@ -159,7 +159,7 @@ export default {
                             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                             neque quas!
                         </p>
-                        <Button label="Read more" class="p-button-text"></Button>
+                        <Button label="Read more" text></Button>
                     </template>
                 </Card>
             </template>
diff --git a/doc/toast/MultipleDoc.vue b/doc/toast/MultipleDoc.vue
index 8d818c145..a88760f9d 100644
--- a/doc/toast/MultipleDoc.vue
+++ b/doc/toast/MultipleDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-2">
-            <Button label="Multiple" class="p-button-warning" @click="showMultiple()" />
+            <Button label="Multiple" severity="warning" @click="showMultiple()" />
             <Button label="Clear" @click="clear()" />
         </div>
     </div>
@@ -19,7 +19,7 @@ export default {
                 basic: `
 <Toast />
 <div class="flex flex-wrap gap-2">
-    <Button label="Multiple" class="p-button-warning" @click="showMultiple()" />
+    <Button label="Multiple" severity="warning" @click="showMultiple()" />
     <Button label="Clear" @click="clear()" />
 </div>`,
                 options: `
@@ -27,7 +27,7 @@ export default {
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button label="Multiple" class="p-button-warning" @click="showMultiple()" />
+            <Button label="Multiple" severity="warning" @click="showMultiple()" />
             <Button label="Clear" @click="clear()" />
         </div>
     </div>
@@ -52,7 +52,7 @@ export default {
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button label="Multiple" class="p-button-warning" @click="showMultiple()" />
+            <Button label="Multiple" severity="warning" @click="showMultiple()" />
             <Button label="Clear" @click="clear()" />
         </div>
     </div>
diff --git a/doc/toast/PositionDoc.vue b/doc/toast/PositionDoc.vue
index 3032a7301..ea6f94966 100644
--- a/doc/toast/PositionDoc.vue
+++ b/doc/toast/PositionDoc.vue
@@ -5,8 +5,8 @@
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" class="mr-2" @click="showTopLeft" />
-            <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+            <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
+            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -21,8 +21,8 @@ export default {
 <Toast />
 <div class="flex flex-wrap gap-2">
     <Button label="Top Left" class="mr-2" @click="showTopLeft" />
-    <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-    <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+    <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
+    <Button label="Bottom Right" severity="success" @click="showBottomRight" />
 </div>`,
                 options: `
 <template>
@@ -30,8 +30,8 @@ export default {
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" class="mr-2" @click="showTopLeft" />
-            <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+            <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
+            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
         </div>
     </div>
 </template>
@@ -57,8 +57,8 @@ export default {
         <Toast />
         <div class="flex flex-wrap gap-2">
             <Button label="Top Left" class="mr-2" @click="showTopLeft" />
-            <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
-            <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
+            <Button label="Bottom Left" severity="warning" @click="showBottomLeft" />
+            <Button label="Bottom Right" severity="success" @click="showBottomRight" />
         </div>
     </div>
 </template>
diff --git a/doc/toast/SeverityDoc.vue b/doc/toast/SeverityDoc.vue
index 08b174f74..d50772f32 100644
--- a/doc/toast/SeverityDoc.vue
+++ b/doc/toast/SeverityDoc.vue
@@ -4,10 +4,10 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <div class="flex flex-wrap gap-2">
-            <Button label="Success" class="p-button-success" @click="showSuccess" />
-            <Button label="Info" class="p-button-info" @click="showInfo" />
-            <Button label="Warn" class="p-button-warning" @click="showWarn" />
-            <Button label="Error" class="p-button-danger" @click="showError" />
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warning" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -21,20 +21,20 @@ export default {
                 basic: `
 <Toast />
 <div class="flex flex-wrap gap-2">
-    <Button label="Success" class="p-button-success" @click="showSuccess" />
-    <Button label="Info" class="p-button-info" @click="showInfo" />
-    <Button label="Warn" class="p-button-warning" @click="showWarn" />
-    <Button label="Error" class="p-button-danger" @click="showError" />
+    <Button label="Success" severity="success" @click="showSuccess" />
+    <Button label="Info" severity="info" @click="showInfo" />
+    <Button label="Warn" severity="warning" @click="showWarn" />
+    <Button label="Error" severity="danger" @click="showError" />
 </div>`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button label="Success" class="p-button-success" @click="showSuccess" />
-            <Button label="Info" class="p-button-info" @click="showInfo" />
-            <Button label="Warn" class="p-button-warning" @click="showWarn" />
-            <Button label="Error" class="p-button-danger" @click="showError" />
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warning" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
         </div>
     </div>
 </template>
@@ -62,10 +62,10 @@ export default {
     <div class="card flex justify-content-center">
         <Toast />
         <div class="flex flex-wrap gap-2">
-            <Button label="Success" class="p-button-success" @click="showSuccess" />
-            <Button label="Info" class="p-button-info" @click="showInfo" />
-            <Button label="Warn" class="p-button-warning" @click="showWarn" />
-            <Button label="Error" class="p-button-danger" @click="showError" />
+            <Button label="Success" severity="success" @click="showSuccess" />
+            <Button label="Info" severity="info" @click="showInfo" />
+            <Button label="Warn" severity="warning" @click="showWarn" />
+            <Button label="Error" severity="danger" @click="showError" />
         </div>
     </div>
 </template>
diff --git a/doc/toast/TemplateDoc.vue b/doc/toast/TemplateDoc.vue
index c44bd852c..ba1a2ac3c 100644
--- a/doc/toast/TemplateDoc.vue
+++ b/doc/toast/TemplateDoc.vue
@@ -12,8 +12,8 @@
                         <p>{{ slotProps.message.detail }}</p>
                     </div>
                     <div class="flex gap-2">
-                        <Button class="p-button-success" label="Yes" @click="onConfirm()"></Button>
-                        <Button class="p-button-secondary" label="No" @click="onReject()"></Button>
+                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
+                        <Button severity="secondary" label="No" @click="onReject()"></Button>
                     </div>
                 </div>
             </template>
@@ -38,8 +38,8 @@ export default {
                 <p>{{ slotProps.message.detail }}</p>
             </div>
             <div class="flex gap-2">
-                <Button class="p-button-success" label="Yes" @click="onConfirm()"></Button>
-                <Button class="p-button-secondary" label="No" @click="onReject()"></Button>
+                <Button severity="success" label="Yes" @click="onConfirm()"></Button>
+                <Button severity="secondary" label="No" @click="onReject()"></Button>
             </div>
         </div>
     </template>
@@ -57,8 +57,8 @@ export default {
                         <p>{{ slotProps.message.detail }}</p>
                     </div>
                     <div class="flex gap-2">
-                        <Button class="p-button-success" label="Yes" @click="onConfirm()"></Button>
-                        <Button class="p-button-secondary" label="No" @click="onReject()"></Button>
+                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
+                        <Button severity="secondary" label="No" @click="onReject()"></Button>
                     </div>
                 </div>
             </template>
@@ -88,8 +88,8 @@ export default {
                         <p>{{ slotProps.message.detail }}</p>
                     </div>
                     <div class="flex gap-2">
-                        <Button class="p-button-success" label="Yes" @click="onConfirm()"></Button>
-                        <Button class="p-button-secondary" label="No" @click="onReject()"></Button>
+                        <Button severity="success" label="Yes" @click="onConfirm()"></Button>
+                        <Button severity="secondary" label="No" @click="onReject()"></Button>
                     </div>
                 </div>
             </template>
diff --git a/doc/toolbar/BasicDoc.vue b/doc/toolbar/BasicDoc.vue
index 13b7900df..a79dcf925 100644
--- a/doc/toolbar/BasicDoc.vue
+++ b/doc/toolbar/BasicDoc.vue
@@ -6,15 +6,15 @@
         <Toolbar>
             <template #start>
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
             <template #end>
                 <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" class="p-button-success mr-2" />
-                <Button icon="pi pi-times" class="p-button-danger" />
+                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
@@ -54,15 +54,15 @@ export default {
 <Toolbar>
     <template #start>
         <Button label="New" icon="pi pi-plus" class="mr-2" />
-        <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
+        <Button label="Upload" icon="pi pi-upload" severity="success" />
         <i class="pi pi-bars p-toolbar-separator mr-2" />
         <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
     </template>
 
     <template #end>
         <Button icon="pi pi-search" class="mr-2" />
-        <Button icon="pi pi-calendar" class="p-button-success mr-2" />
-        <Button icon="pi pi-times" class="p-button-danger" />
+        <Button icon="pi pi-calendar" severity="success" class="mr-2" />
+        <Button icon="pi pi-times" severity="danger" />
     </template>
 </Toolbar>`,
                 options: `
@@ -71,15 +71,15 @@ export default {
         <Toolbar>
             <template #start>
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
             <template #end>
                 <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" class="p-button-success mr-2" />
-                <Button icon="pi pi-times" class="p-button-danger" />
+                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
@@ -123,15 +123,15 @@ export default {
         <Toolbar>
             <template #start>
                 <Button label="New" icon="pi pi-plus" class="mr-2" />
-                <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
+                <Button label="Upload" icon="pi pi-upload" severity="success" />
                 <i class="pi pi-bars p-toolbar-separator mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
             <template #end>
                 <Button icon="pi pi-search" class="mr-2" />
-                <Button icon="pi pi-calendar" class="p-button-success mr-2" />
-                <Button icon="pi pi-times" class="p-button-danger" />
+                <Button icon="pi pi-calendar" severity="success" class="mr-2" />
+                <Button icon="pi pi-times" severity="danger" />
             </template>
         </Toolbar>
     </div>
diff --git a/doc/treetable/TemplateDoc.vue b/doc/treetable/TemplateDoc.vue
index 293cdc604..0e6f18ae6 100644
--- a/doc/treetable/TemplateDoc.vue
+++ b/doc/treetable/TemplateDoc.vue
@@ -13,14 +13,14 @@
             <Column headerStyle="width: 10rem">
                 <template #body>
                     <div class="flex flex-wrap gap-2">
-                        <Button type="button" icon="pi pi-search" class="p-button-rounded" />
-                        <Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
+                        <Button type="button" icon="pi pi-search" rounded />
+                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
                     </div>
                 </template>
             </Column>
             <template #footer>
                 <div class="flex justify-content-start">
-                    <Button icon="pi pi-refresh" label="Reload" class="p-button-warning" />
+                    <Button icon="pi pi-refresh" label="Reload" severity="warning" />
                 </div>
             </template>
         </TreeTable>
@@ -47,14 +47,14 @@ export default {
     <Column headerStyle="width: 10rem">
         <template #body>
             <div class="flex flex-wrap gap-2">
-                <Button type="button" icon="pi pi-search" class="p-button-rounded" />
-                <Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
+                <Button type="button" icon="pi pi-search" rounded />
+                <Button type="button" icon="pi pi-pencil" rounded severity="success" />
             </div>
         </template>
     </Column>
     <template #footer>
         <div class="flex justify-content-start">
-            <Button icon="pi pi-refresh" label="Reload" class="p-button-warning" />
+            <Button icon="pi pi-refresh" label="Reload" severity="warning" />
         </div>
     </template>
 </TreeTable>`,
@@ -71,14 +71,14 @@ export default {
             <Column headerStyle="width: 10rem">
                 <template #body>
                     <div class="flex flex-wrap gap-2">
-                        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button" />
-                        <Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
+                        <Button type="button" icon="pi pi-search" rounded/>
+                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
                     </div>
                 </template>
             </Column>
             <template #footer>
                 <div class="flex justify-content-start">
-                    <Button icon="pi pi-refresh" label="Reload" class="p-button-warning" />
+                    <Button icon="pi pi-refresh" label="Reload" severity="warning" />
                 </div>
             </template>
         </TreeTable>
@@ -112,14 +112,14 @@ export default {
             <Column headerStyle="width: 10rem">
                 <template #body>
                     <div class="flex flex-wrap gap-2">
-                        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button" />
-                        <Button type="button" icon="pi pi-pencil" class="p-button-rounded p-button-success" />
+                        <Button type="button" icon="pi pi-search" rounded/>
+                        <Button type="button" icon="pi pi-pencil" rounded severity="success" />
                     </div>
                 </template>
             </Column>
             <template #footer>
                 <div class="flex justify-content-start">
-                    <Button icon="pi pi-refresh" label="Reload" class="p-button-warning" />
+                    <Button icon="pi pi-refresh" label="Reload" severity="warning" />
                 </div>
             </template>
         </TreeTable>
diff --git a/doc/treetable/paginator/PaginatorTemplateDoc.vue b/doc/treetable/paginator/PaginatorTemplateDoc.vue
index 0ceecc298..afeca8674 100644
--- a/doc/treetable/paginator/PaginatorTemplateDoc.vue
+++ b/doc/treetable/paginator/PaginatorTemplateDoc.vue
@@ -15,13 +15,13 @@
             currentPageReportTemplate="{first} to {last} of {totalRecords}"
         >
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
         </TreeTable>
     </div>
@@ -39,13 +39,13 @@ export default {
     paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
     currentPageReportTemplate="{first} to {last} of {totalRecords}">
     <template #paginatorstart>
-        <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+        <Button type="button" icon="pi pi-refresh" text />
     </template>
     <Column field="name" header="Name" expander></Column>
     <Column field="size" header="Size"></Column>
     <Column field="type" header="Type"></Column>
     <template #paginatorend>
-        <Button type="button" icon="pi pi-download" class="p-button-text" />
+        <Button type="button" icon="pi pi-download" text />
     </template>
 </TreeTable>`,
                 options: `
@@ -55,13 +55,13 @@ export default {
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="{first} to {last} of {totalRecords}">
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
         </TreeTable>
     </div>
@@ -111,13 +111,13 @@ export default {
             paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
             currentPageReportTemplate="{first} to {last} of {totalRecords}">
             <template #paginatorstart>
-                <Button type="button" icon="pi pi-refresh" class="p-button-text" />
+                <Button type="button" icon="pi pi-refresh" text />
             </template>
             <Column field="name" header="Name" expander></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
             <template #paginatorend>
-                <Button type="button" icon="pi pi-download" class="p-button-text" />
+                <Button type="button" icon="pi pi-download" text />
             </template>
         </TreeTable>
     </div>
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index 416084c73..deb96b218 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -4,10 +4,10 @@
             <section class="mb-5">
                 <h3>Component Scale</h3>
                 <div class="flex align-items-center gap-2">
-                    <Button icon="pi pi-minus" @click="decrementScale" class="p-button-text p-button-rounded w-2rem h-2rem" :disabled="scale === scales[0]" />
+                    <Button icon="pi pi-minus" @click="decrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[0]" />
                     <i v-for="s in scales" :key="s" :class="['pi pi-circle-fill text-sm text-600', { 'text-lg text-primary': s === scale }]" />
 
-                    <Button icon="pi pi-plus" @click="incrementScale" class="p-button-text p-button-rounded w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
+                    <Button icon="pi pi-plus" @click="incrementScale" text rounded class="w-2rem h-2rem" :disabled="scale === scales[scales.length - 1]" />
                 </div>
             </section>
 
diff --git a/pages/landing/ComponentSection.vue b/pages/landing/ComponentSection.vue
index 1a6f1e691..103c64aa3 100644
--- a/pages/landing/ComponentSection.vue
+++ b/pages/landing/ComponentSection.vue
@@ -79,7 +79,7 @@
                         </div>
                         <span class="font-medium text-xl ml-auto">$12.45</span>
                     </div>
-                    <Button label="Add to Cart" icon="pi pi-shopping-cart" class="w-full p-button-outlined"></Button>
+                    <Button label="Add to Cart" icon="pi pi-shopping-cart" outlined class="w-full"></Button>
                 </div>
                 <div class="box p-4 mb-5">
                     <Tree :value="nodes" class="bg-transparent border-none p-0" />
diff --git a/pages/landing/DesignerSection.vue b/pages/landing/DesignerSection.vue
index c03fac409..124496139 100644
--- a/pages/landing/DesignerSection.vue
+++ b/pages/landing/DesignerSection.vue
@@ -104,7 +104,7 @@
                             <span class="font-semibold mb-2 block mb-3 mt-5 p-component">Buttons</span>
                             <div class="flex align-items-center">
                                 <Button type="button" label="Save" icon="pi pi-check" class="mr-1"></Button>
-                                <Button type="button" label="Clear" icon="pi pi-times" class="p-button-outlined ml-1"></Button>
+                                <Button type="button" label="Clear" icon="pi pi-times" outlined class="ml-1"></Button>
                             </div>
                         </div>
                     </div>
diff --git a/pages/landing/ThemeSection.vue b/pages/landing/ThemeSection.vue
index bf11ca66b..5587f5cdb 100644
--- a/pages/landing/ThemeSection.vue
+++ b/pages/landing/ThemeSection.vue
@@ -78,7 +78,7 @@
                     </Column>
                     <Column headerStyle="min-width: 4rem; text-align: center" bodyStyle="text-align: center; overflow: visible">
                         <template #body>
-                            <Button type="button" icon="pi pi-cog" class="p-button-text"></Button>
+                            <Button type="button" icon="pi pi-cog" text></Button>
                         </template>
                     </Column>
                 </DataTable>
diff --git a/pages/steps/Confirmation.vue b/pages/steps/Confirmation.vue
index 487cb18a0..16bd424f7 100755
--- a/pages/steps/Confirmation.vue
+++ b/pages/steps/Confirmation.vue
@@ -43,7 +43,7 @@
             <template v-slot:footer>
                 <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
-                    <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success" />
+                    <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" severity="success" />
                 </div>
             </template>
         </Card>