diff --git a/doc/button/IconOnlyDoc.vue b/doc/button/IconOnlyDoc.vue
index 813fe3391..6f651d07d 100644
--- a/doc/button/IconOnlyDoc.vue
+++ b/doc/button/IconOnlyDoc.vue
@@ -5,52 +5,52 @@
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
+            <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
+            <Button icon="pi pi-check" text rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -62,106 +62,96 @@ export default {
         return {
             code: {
                 basic: `
-<div class="flex flex-wrap justify-content-center gap-3 mb-4">
-    <Button icon="pi pi-check" aria-label="Filter" />
-    <Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
-    <Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
-    <Button icon="pi pi-user" class="p-button-info" aria-label="User" />
-    <Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
-    <Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
-    <Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
-</div>
+<Button icon="pi pi-check" aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" aria-label="Search" />
+<Button icon="pi pi-user" severity="info" aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
 
-<div class="flex flex-wrap justify-content-center gap-3 mb-4">
-    <Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
-    <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
-    <Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
-    <Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
-    <Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
-    <Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
-    <Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
-</div>
+<Button icon="pi pi-check" rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
 
-<div class="flex flex-wrap justify-content-center gap-3 mb-4">
-    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
-    <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
-    <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
-    <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
-    <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
-    <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
-    <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
-</div>
+<Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
+<Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
 
-<div class="flex flex-wrap justify-content-center gap-3 mb-4">
-    <Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
-    <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
-    <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
-    <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
-    <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
-    <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
-    <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
-</div>
+<Button icon="pi pi-check" text raised rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
 
-<div class="flex flex-wrap justify-content-center gap-3">
-    <Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
-    <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
-    <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
-    <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
-    <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
-    <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
-    <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
-</div>`,
+<Button icon="pi pi-check" text rounded aria-label="Filter" />
+<Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
+<Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
+<Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
+<Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
+<Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
+<Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />`,
                 options: `
 <template>
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
+            <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
+            <Button icon="pi pi-check" text rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
         </div>
     </div>
 </template>
@@ -173,52 +163,52 @@ export default {
     <div class="card">
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
             <Button icon="pi pi-check" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger" aria-label="Cancel" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-outlined" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-outlined" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-outlined" aria-label="Cancel" />
+            <Button icon="pi pi-check" rounded outlined aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded outlined aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" rounded outlined aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" rounded outlined aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" rounded outlined aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" rounded outlined aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" rounded outlined aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3 mb-4">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text p-button-raised" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text p-button-raised" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text p-button-raised" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text p-button-raised" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text p-button-raised" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text p-button-raised" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text p-button-raised" aria-label="Cancel" />
+            <Button icon="pi pi-check" text raised rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text raised rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text raised rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text raised rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text raised rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text raised rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text raised rounded aria-label="Cancel" />
         </div>
 
         <div class="flex flex-wrap justify-content-center gap-3">
-            <Button icon="pi pi-check" class="p-button-rounded p-button-text" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" class="p-button-secondary p-button-rounded p-button-text" aria-label="Bookmark" />
-            <Button icon="pi pi-search" class="p-button-success p-button-rounded p-button-text" aria-label="Search" />
-            <Button icon="pi pi-user" class="p-button-info p-button-rounded p-button-text" aria-label="User" />
-            <Button icon="pi pi-bell" class="p-button-warning p-button-rounded p-button-text" aria-label="Notification" />
-            <Button icon="pi pi-heart" class="p-button-help p-button-rounded p-button-text" aria-label="Favorite" />
-            <Button icon="pi pi-times" class="p-button-danger p-button-rounded p-button-text" aria-label="Cancel" />
+            <Button icon="pi pi-check" text rounded aria-label="Filter" />
+            <Button icon="pi pi-bookmark" severity="secondary" text rounded aria-label="Bookmark" />
+            <Button icon="pi pi-search" severity="success" text rounded aria-label="Search" />
+            <Button icon="pi pi-user" severity="info" text rounded aria-label="User" />
+            <Button icon="pi pi-bell" severity="warning" text rounded aria-label="Notification" />
+            <Button icon="pi pi-heart" severity="help" text rounded aria-label="Favorite" />
+            <Button icon="pi pi-times" severity="danger" text rounded aria-label="Cancel" />
         </div>
     </div>
 </template>
diff --git a/doc/button/LinkDoc.vue b/doc/button/LinkDoc.vue
index e54d6f1f9..bb29e24af 100644
--- a/doc/button/LinkDoc.vue
+++ b/doc/button/LinkDoc.vue
@@ -1,9 +1,9 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>A button can be rendered as a link by adding <i>p-button-link</i> class.</p>
+        <p>A button can be rendered as a link as well.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Button label="Link" class="p-button-link" />
+        <Button label="Link" link />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,11 +14,11 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Link" class="p-button-link" />`,
+<Button label="Link" link />`,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Link" class="p-button-link" />
+        <Button label="Link" link />
     </div>
 </template>
 
@@ -27,7 +27,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Button label="Link" class="p-button-link" />
+        <Button label="Link" link />
     </div>
 </template>
 
diff --git a/doc/button/OutlinedDoc.vue b/doc/button/OutlinedDoc.vue
index 90335976d..b437c8a49 100644
--- a/doc/button/OutlinedDoc.vue
+++ b/doc/button/OutlinedDoc.vue
@@ -3,13 +3,13 @@
         <p>Outlined buttons display a border without a background initially.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-outlined" />
-        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
-        <Button label="Success" class="p-button-outlined p-button-success" />
-        <Button label="Info" class="p-button-outlined p-button-info" />
-        <Button label="Warning" class="p-button-outlined p-button-warning" />
-        <Button label="Help" class="p-button-outlined p-button-help" />
-        <Button label="Danger" class="p-button-outlined p-button-danger" />
+        <Button label="Primary" outlined />
+        <Button label="Secondary" severity="secondary" outlined />
+        <Button label="Success" severity="success" outlined />
+        <Button label="Info" severity="info" outlined />
+        <Button label="Warning" severity="warning" outlined />
+        <Button label="Help" severity="help" outlined />
+        <Button label="Danger" severity="danger" outlined />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,23 +20,23 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" class="p-button-outlined" />
-<Button label="Secondary" class="p-button-outlined p-button-secondary" />
-<Button label="Success" class="p-button-outlined p-button-success" />
-<Button label="Info" class="p-button-outlined p-button-info" />
-<Button label="Warning" class="p-button-outlined p-button-warning" />
-<Button label="Help" class="p-button-outlined p-button-help" />
-<Button label="Danger" class="p-button-outlined p-button-danger" />`,
+<Button label="Primary" outlined />
+<Button label="Secondary" severity="secondary" outlined />
+<Button label="Success" severity="success" outlined />
+<Button label="Info" severity="info" outlined />
+<Button label="Warning" severity="warning" outlined />
+<Button label="Help" severity="help" outlined />
+<Button label="Danger" severity="danger" outlined />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-outlined" />
-        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
-        <Button label="Success" class="p-button-outlined p-button-success" />
-        <Button label="Info" class="p-button-outlined p-button-info" />
-        <Button label="Warning" class="p-button-outlined p-button-warning" />
-        <Button label="Help" class="p-button-outlined p-button-help" />
-        <Button label="Danger" class="p-button-outlined p-button-danger" />
+        <Button label="Primary" outlined />
+        <Button label="Secondary" severity="secondary" outlined />
+        <Button label="Success" severity="success" outlined />
+        <Button label="Info" severity="info" outlined />
+        <Button label="Warning" severity="warning" outlined />
+        <Button label="Help" severity="help" outlined />
+        <Button label="Danger" severity="danger" outlined />
     </div>
 </template>
 
@@ -45,13 +45,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-outlined" />
-        <Button label="Secondary" class="p-button-outlined p-button-secondary" />
-        <Button label="Success" class="p-button-outlined p-button-success" />
-        <Button label="Info" class="p-button-outlined p-button-info" />
-        <Button label="Warning" class="p-button-outlined p-button-warning" />
-        <Button label="Help" class="p-button-outlined p-button-help" />
-        <Button label="Danger" class="p-button-outlined p-button-danger" />
+        <Button label="Primary" outlined />
+        <Button label="Secondary" severity="secondary" outlined />
+        <Button label="Success" severity="success" outlined />
+        <Button label="Info" severity="info" outlined />
+        <Button label="Warning" severity="warning" outlined />
+        <Button label="Help" severity="help" outlined />
+        <Button label="Danger" severity="danger" outlined />
     </div>
 </template>
 
diff --git a/doc/button/RaisedDoc.vue b/doc/button/RaisedDoc.vue
index 1383054e6..a6e87230b 100644
--- a/doc/button/RaisedDoc.vue
+++ b/doc/button/RaisedDoc.vue
@@ -3,13 +3,13 @@
         <p>Raised buttons display a shadow to indicate elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-raised" />
-        <Button label="Secondary" class="p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-raised p-button-danger" />
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warning" severity="warning" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,23 +20,23 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" class="p-button-raised" />
-<Button label="Secondary" class="p-button-raised p-button-secondary" />
-<Button label="Success" class="p-button-raised p-button-success" />
-<Button label="Info" class="p-button-raised p-button-info" />
-<Button label="Warning" class="p-button-raised p-button-warning" />
-<Button label="Help" class="p-button-raised p-button-help" />
-<Button label="Danger" class="p-button-raised p-button-danger" />`,
+<Button label="Primary" raised />
+<Button label="Secondary" severity="secondary" raised />
+<Button label="Success" severity="success" raised />
+<Button label="Info" severity="info" raised />
+<Button label="Warning" severity="warning" raised />
+<Button label="Help" severity="help" raised />
+<Button label="Danger" severity="danger" raised />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-raised" />
-        <Button label="Secondary" class="p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-raised p-button-danger" />
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warning" severity="warning" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
     </div>
 </template>
 
@@ -45,13 +45,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-raised" />
-        <Button label="Secondary" class="p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-raised p-button-danger" />
+        <Button label="Primary" raised />
+        <Button label="Secondary" severity="secondary" raised />
+        <Button label="Success" severity="success" raised />
+        <Button label="Info" severity="info" raised />
+        <Button label="Warning" severity="warning" raised />
+        <Button label="Help" severity="help" raised />
+        <Button label="Danger" severity="danger" raised />
     </div>
 </template>
 
diff --git a/doc/button/RaisedTextDoc.vue b/doc/button/RaisedTextDoc.vue
index 22b5a8a12..ef08c0180 100644
--- a/doc/button/RaisedTextDoc.vue
+++ b/doc/button/RaisedTextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons can be displayed as raised as well for elevation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text p-button-raised" />
-        <Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-text p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
+        <Button label="Primary" text raised />
+        <Button label="Secondary" severity="secondary" text raised />
+        <Button label="Success" severity="success" text raised />
+        <Button label="Info" severity="info" text raised />
+        <Button label="Warning" severity="warning" text raised />
+        <Button label="Help" severity="help" text raised />
+        <Button label="Danger" severity="danger" text raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,23 +20,23 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" class="p-button-text p-button-raised" />
-<Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
-<Button label="Success" class="p-button-text p-button-raised p-button-success" />
-<Button label="Info" class="p-button-text p-button-raised p-button-info" />
-<Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
-<Button label="Help" class="p-button-text p-button-raised p-button-help" />
-<Button label="Danger" class="p-button-text p-button-raised p-button-danger" />`,
+<Button label="Primary" text raised />
+<Button label="Secondary" severity="secondary" text raised />
+<Button label="Success" severity="success" text raised />
+<Button label="Info" severity="info" text raised />
+<Button label="Warning" severity="warning" text raised />
+<Button label="Help" severity="help" text raised />
+<Button label="Danger" severity="danger" text raised />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text p-button-raised" />
-        <Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-text p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
+        <Button label="Primary" text raised />
+        <Button label="Secondary" severity="secondary" text raised />
+        <Button label="Success" severity="success" text raised />
+        <Button label="Info" severity="info" text raised />
+        <Button label="Warning" severity="warning" text raised />
+        <Button label="Help" severity="help" text raised />
+        <Button label="Danger" severity="danger" text raised />
     </div>
 </template>
 
@@ -45,13 +45,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text p-button-raised" />
-        <Button label="Secondary" class="p-button-text p-button-raised p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-raised p-button-success" />
-        <Button label="Info" class="p-button-text p-button-raised p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-raised p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-raised p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-raised p-button-danger" />
+        <Button label="Primary" text raised />
+        <Button label="Secondary" severity="secondary" text raised />
+        <Button label="Success" severity="success" text raised />
+        <Button label="Info" severity="info" text raised />
+        <Button label="Warning" severity="warning" text raised />
+        <Button label="Help" severity="help" text raised />
+        <Button label="Danger" severity="danger" text raised />
     </div>
 </template>
 
diff --git a/doc/button/RoundedDoc.vue b/doc/button/RoundedDoc.vue
index 956b2eafc..0cccd2082 100644
--- a/doc/button/RoundedDoc.vue
+++ b/doc/button/RoundedDoc.vue
@@ -3,13 +3,13 @@
         <p>Rounded buttons have a circular border radius.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-rounded" />
-        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
-        <Button label="Success" class="p-button-rounded p-button-success" />
-        <Button label="Info" class="p-button-rounded p-button-info" />
-        <Button label="Warning" class="p-button-rounded p-button-warning" />
-        <Button label="Help" class="p-button-rounded p-button-help" />
-        <Button label="Danger" class="p-button-rounded p-button-danger" />
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warning" severity="warning" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,23 +20,23 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" class="p-button-rounded" />
-<Button label="Secondary" class="p-button-rounded p-button-secondary" />
-<Button label="Success" class="p-button-rounded p-button-success" />
-<Button label="Info" class="p-button-rounded p-button-info" />
-<Button label="Warning" class="p-button-rounded p-button-warning" />
-<Button label="Help" class="p-button-rounded p-button-help" />
-<Button label="Danger" class="p-button-rounded p-button-danger" />`,
+<Button label="Primary" rounded />
+<Button label="Secondary" severity="secondary" rounded />
+<Button label="Success" severity="success" rounded />
+<Button label="Info" severity="info" rounded />
+<Button label="Warning" severity="warning" rounded />
+<Button label="Help" severity="help" rounded />
+<Button label="Danger" severity="danger" rounded />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-rounded" />
-        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
-        <Button label="Success" class="p-button-rounded p-button-success" />
-        <Button label="Info" class="p-button-rounded p-button-info" />
-        <Button label="Warning" class="p-button-rounded p-button-warning" />
-        <Button label="Help" class="p-button-rounded p-button-help" />
-        <Button label="Danger" class="p-button-rounded p-button-danger" />
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warning" severity="warning" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
     </div>
 </template>
 
@@ -45,13 +45,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-rounded" />
-        <Button label="Secondary" class="p-button-rounded p-button-secondary" />
-        <Button label="Success" class="p-button-rounded p-button-success" />
-        <Button label="Info" class="p-button-rounded p-button-info" />
-        <Button label="Warning" class="p-button-rounded p-button-warning" />
-        <Button label="Help" class="p-button-rounded p-button-help" />
-        <Button label="Danger" class="p-button-rounded p-button-danger" />
+        <Button label="Primary" rounded />
+        <Button label="Secondary" severity="secondary" rounded />
+        <Button label="Success" severity="success" rounded />
+        <Button label="Info" severity="info" rounded />
+        <Button label="Warning" severity="warning" rounded />
+        <Button label="Help" severity="help" rounded />
+        <Button label="Danger" severity="danger" rounded />
     </div>
 </template>
 
diff --git a/doc/button/SeverityDoc.vue b/doc/button/SeverityDoc.vue
index d3c205bfd..a650dddf8 100644
--- a/doc/button/SeverityDoc.vue
+++ b/doc/button/SeverityDoc.vue
@@ -4,12 +4,12 @@
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
-        <Button label="Secondary" class="p-button-secondary" />
-        <Button label="Success" class="p-button-success" />
-        <Button label="Info" class="p-button-info" />
-        <Button label="Warning" class="p-button-warning" />
-        <Button label="Help" class="p-button-help" />
-        <Button label="Danger" class="p-button-danger" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warning" severity="warning" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,22 +21,22 @@ export default {
             code: {
                 basic: `
 <Button label="Primary" />
-<Button label="Secondary" class="p-button-secondary" />
-<Button label="Success" class="p-button-success" />
-<Button label="Info" class="p-button-info" />
-<Button label="Warning" class="p-button-warning" />
-<Button label="Help" class="p-button-help" />
-<Button label="Danger" class="p-button-danger" />`,
+<Button label="Secondary" severity="secondary" />
+<Button label="Success" severity="success" />
+<Button label="Info" severity="info" />
+<Button label="Warning" severity="warning" />
+<Button label="Help" severity="help" />
+<Button label="Danger" severity="danger" />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
-        <Button label="Secondary" class="p-button-secondary" />
-        <Button label="Success" class="p-button-success" />
-        <Button label="Info" class="p-button-info" />
-        <Button label="Warning" class="p-button-warning" />
-        <Button label="Help" class="p-button-help" />
-        <Button label="Danger" class="p-button-danger" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warning" severity="warning" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
     </div>
 </template>
 
@@ -46,12 +46,12 @@ export default {
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
         <Button label="Primary" />
-        <Button label="Secondary" class="p-button-secondary" />
-        <Button label="Success" class="p-button-success" />
-        <Button label="Info" class="p-button-info" />
-        <Button label="Warning" class="p-button-warning" />
-        <Button label="Help" class="p-button-help" />
-        <Button label="Danger" class="p-button-danger" />
+        <Button label="Secondary" severity="secondary" />
+        <Button label="Success" severity="success" />
+        <Button label="Info" severity="info" />
+        <Button label="Warning" severity="warning" />
+        <Button label="Help" severity="help" />
+        <Button label="Danger" severity="danger" />
     </div>
 </template>
 
diff --git a/doc/button/SizesDoc.vue b/doc/button/SizesDoc.vue
index a626191a8..c60b69aef 100644
--- a/doc/button/SizesDoc.vue
+++ b/doc/button/SizesDoc.vue
@@ -3,9 +3,9 @@
         <p>Button provides <i>small</i> and <i>large</i> sizes as alternatives to the standard.</p>
     </DocSectionText>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
-        <Button label="Small" icon="pi pi-check" class="p-button-sm" />
-        <Button label="Normal" icon="pi pi-check" class="p-button" />
-        <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,15 +16,15 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Small" icon="pi pi-check" class="p-button-sm" />
-<Button label="Normal" icon="pi pi-check" class="p-button" />
-<Button label="Large" icon="pi pi-check" class="p-button-lg" />`,
+<Button label="Small" icon="pi pi-check" size="small" />
+<Button label="Normal" icon="pi pi-check" />
+<Button label="Large" icon="pi pi-check" size="large" />`,
                 options: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
-        <Button label="Small" icon="pi pi-check" class="p-button-sm" />
-        <Button label="Normal" icon="pi pi-check" class="p-button" />
-        <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
 </template>
 
@@ -33,9 +33,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex flex-wrap align-items-center justify-content-center gap-3">
-        <Button label="Small" icon="pi pi-check" class="p-button-sm" />
-        <Button label="Normal" icon="pi pi-check" class="p-button" />
-        <Button label="Large" icon="pi pi-check" class="p-button-lg" />
+        <Button label="Small" icon="pi pi-check" size="small" />
+        <Button label="Normal" icon="pi pi-check" />
+        <Button label="Large" icon="pi pi-check" size="large" />
     </div>
 </template>
 
diff --git a/doc/button/TextDoc.vue b/doc/button/TextDoc.vue
index d830fc169..1b9523dd1 100644
--- a/doc/button/TextDoc.vue
+++ b/doc/button/TextDoc.vue
@@ -3,13 +3,13 @@
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text" />
-        <Button label="Secondary" class="p-button-text p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-success" />
-        <Button label="Info" class="p-button-text p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-danger" />
+        <Button label="Primary" text />
+        <Button label="Secondary" severity="secondary" text />
+        <Button label="Success" severity="success" text />
+        <Button label="Info" severity="info" text />
+        <Button label="Warning" severity="warning" text />
+        <Button label="Help" severity="help" text />
+        <Button label="Danger" severity="danger" text />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -20,23 +20,23 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" class="p-button-text" />
-<Button label="Secondary" class="p-button-text p-button-secondary" />
-<Button label="Success" class="p-button-text p-button-success" />
-<Button label="Info" class="p-button-text p-button-info" />
-<Button label="Warning" class="p-button-text p-button-warning" />
-<Button label="Help" class="p-button-text p-button-help" />
-<Button label="Danger" class="p-button-text p-button-danger" />`,
+<Button label="Primary" text />
+<Button label="Secondary" severity="secondary" text />
+<Button label="Success" severity="success" text />
+<Button label="Info" severity="info" text />
+<Button label="Warning" severity="warning" text />
+<Button label="Help" severity="help" text />
+<Button label="Danger" severity="danger" text />`,
                 options: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text" />
-        <Button label="Secondary" class="p-button-text p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-success" />
-        <Button label="Info" class="p-button-text p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-danger" />
+        <Button label="Primary" text />
+        <Button label="Secondary" severity="secondary" text />
+        <Button label="Success" severity="success" text />
+        <Button label="Info" severity="info" text />
+        <Button label="Warning" severity="warning" text />
+        <Button label="Help" severity="help" text />
+        <Button label="Danger" severity="danger" text />
     </div>
 </template>
 
@@ -45,13 +45,13 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center flex-wrap gap-3">
-        <Button label="Primary" class="p-button-text" />
-        <Button label="Secondary" class="p-button-text p-button-secondary" />
-        <Button label="Success" class="p-button-text p-button-success" />
-        <Button label="Info" class="p-button-text p-button-info" />
-        <Button label="Warning" class="p-button-text p-button-warning" />
-        <Button label="Help" class="p-button-text p-button-help" />
-        <Button label="Danger" class="p-button-text p-button-danger" />
+        <Button label="Primary" text />
+        <Button label="Secondary" severity="secondary" text />
+        <Button label="Success" severity="success" text />
+        <Button label="Info" severity="info" text />
+        <Button label="Warning" severity="warning" text />
+        <Button label="Help" severity="help" text />
+        <Button label="Danger" severity="danger" text />
     </div>
 </template>
 
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 381eec593..c9d744db4 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -3662,6 +3662,14 @@
                             "default": "",
                             "description": "Text of the button."
                         },
+                        {
+                            "name": "link",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a link style to the button."
+                        },
                         {
                             "name": "loading",
                             "optional": true,
@@ -3678,6 +3686,46 @@
                             "default": "pi pi-spinner pi-spin",
                             "description": "Icon to display in loading state."
                         },
+                        {
+                            "name": "outlined",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a border class without a background initially."
+                        },
+                        {
+                            "name": "raised",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a shadow to indicate elevation."
+                        },
+                        {
+                            "name": "rounded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a circular border radius to the button."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"success\" | \"info\" | \"warning\" | \"danger\" | \"secondary\"",
+                            "default": "",
+                            "description": "Defines the style of the button."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"large\"",
+                            "default": "",
+                            "description": "Defines the size of the button."
+                        },
                         {
                             "name": "style",
                             "optional": true,
@@ -3685,6 +3733,14 @@
                             "type": "any",
                             "default": "",
                             "description": "Inline style of the button."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a textual class to the button without a background initially."
                         }
                     ],
                     "methods": [],
@@ -22219,7 +22275,7 @@
                             "name": "bottom",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "boolean",
                             "default": "false",
                             "description": "Bottom position for Tooltip."
                         },
@@ -22227,7 +22283,7 @@
                             "name": "focus",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "boolean",
                             "default": "true",
                             "description": "Focus event for Tooltip."
                         },
@@ -22235,7 +22291,7 @@
                             "name": "left",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "boolean",
                             "default": "false",
                             "description": "Left position for Tooltip."
                         },
@@ -22243,7 +22299,7 @@
                             "name": "right",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "boolean",
                             "default": "true",
                             "description": "Right position for Tooltip."
                         },
@@ -22251,7 +22307,7 @@
                             "name": "top",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
+                            "type": "boolean",
                             "default": "false",
                             "description": "Top position for Tooltip."
                         }