diff --git a/apps/showcase/doc/button/IconOnlyDoc.vue b/apps/showcase/doc/button/IconOnlyDoc.vue
index 18fe197d0..3c3844e77 100644
--- a/apps/showcase/doc/button/IconOnlyDoc.vue
+++ b/apps/showcase/doc/button/IconOnlyDoc.vue
@@ -3,59 +3,62 @@
         <p>Buttons can have icons without labels.</p>
     </DocSectionText>
     <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -65,6 +68,12 @@
 export default {
     data() {
         return {
+            size: 'normal',
+            sizeOptions: [
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'normal' },
+                { label: 'Large', value: 'large' }
+            ],
             code: {
                 basic: `
 <Button icon="pi pi-check" aria-label="Filter" />
@@ -115,127 +124,153 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
         </div>
     </div>
 </template>
 
 <script>
+export default {
+    data() {
+        return {
+            size: 'normal',
+            sizeOptions: [
+                { label: 'Small', value: 'small' },
+                { label: 'Normal', value: 'normal' },
+                { label: 'Large', value: 'large' }
+            ]
+        }
+    }
+}
 <\/script>
 `,
                 composition: `
 <template>
     <div class="card">
-        <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" aria-label="Star" />
+        <div class="flex justify-center mb-8">
+            <SelectButton v-model="size" :options="sizeOptions" optionLabel="label" optionValue="value" dataKey="label" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" />
+            <Button icon="pi pi-check" aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" />
+            <Button icon="pi pi-check" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" />
+            <Button icon="pi pi-check" rounded variant="outlined" aria-label="Filter" :size="size" /> <Button icon="pi pi-bookmark" severity="secondary" rounded variant="outlined" aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" rounded variant="outlined" aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" rounded variant="outlined" aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" rounded variant="outlined" aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" rounded variant="outlined" aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" rounded variant="outlined" aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" rounded variant="outlined" aria-label="Star" :size="size" />
+        </div>
+
+        <div class="flex flex-wrap justify-center gap-4 mb-6">
+            <Button icon="pi pi-check" variant="text" raised rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" raised rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" raised rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" raised rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" raised rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" raised rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" raised rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" raised rounded aria-label="Star" :size="size" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" />
-            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" />
-            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" />
-            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" />
-            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" />
-            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" />
-            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" />
-            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" />
+            <Button icon="pi pi-check" variant="text" rounded aria-label="Filter" :size="size" />
+            <Button icon="pi pi-bookmark" severity="secondary" variant="text" rounded aria-label="Bookmark" :size="size" />
+            <Button icon="pi pi-search" severity="success" variant="text" rounded aria-label="Search" :size="size" />
+            <Button icon="pi pi-user" severity="info" variant="text" rounded aria-label="User" :size="size" />
+            <Button icon="pi pi-bell" severity="warn" variant="text" rounded aria-label="Notification" :size="size" />
+            <Button icon="pi pi-heart" severity="help" variant="text" rounded aria-label="Favorite" :size="size" />
+            <Button icon="pi pi-times" severity="danger" variant="text" rounded aria-label="Cancel" :size="size" />
+            <Button icon="pi pi-star" severity="contrast" variant="text" rounded aria-label="Star" :size="size" />
         </div>
     </div>
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
+const size = ref('normal');
+const sizeOptions = ref([
+    { label: 'Small', value: 'small' },
+    { label: 'Normal', value: 'normal' },
+    { label: 'Large', value: 'large' }
+]);
 <\/script>
 `
             }
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index 66e266c44..68394cb32 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -69,6 +69,14 @@ const theme = ({ dt }) => `
     font-size: ${dt('button.sm.font.size')};
 }
 
+.p-button-sm.p-button-icon-only {
+    width: ${dt('button.sm.icon.only.width')};
+}
+
+.p-button-sm.p-button-icon-only.p-button-rounded {
+    height: ${dt('button.sm.icon.only.width')};
+}
+
 .p-button-lg {
     font-size: ${dt('button.lg.font.size')};
     padding: ${dt('button.lg.padding.y')} ${dt('button.lg.padding.x')};
@@ -78,6 +86,14 @@ const theme = ({ dt }) => `
     font-size: ${dt('button.lg.font.size')};
 }
 
+.p-button-lg.p-button-icon-only {
+    width: ${dt('button.lg.icon.only.width')};
+}
+
+.p-button-lg.p-button-icon-only.p-button-rounded {
+    height: ${dt('button.lg.icon.only.width')};
+}
+
 .p-button-vertical {
     flex-direction: column;
 }
diff --git a/packages/themes/src/presets/aura/button/index.js b/packages/themes/src/presets/aura/button/index.js
index dc7a9abed..5fde4c497 100644
--- a/packages/themes/src/presets/aura/button/index.js
+++ b/packages/themes/src/presets/aura/button/index.js
@@ -9,12 +9,14 @@ export default {
         sm: {
             fontSize: '{form.field.sm.font.size}',
             paddingX: '{form.field.sm.padding.x}',
-            paddingY: '{form.field.sm.padding.y}'
+            paddingY: '{form.field.sm.padding.y}',
+            iconOnlyWidth: '2rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
             paddingX: '{form.field.lg.padding.x}',
-            paddingY: '{form.field.lg.padding.y}'
+            paddingY: '{form.field.lg.padding.y}',
+            iconOnlyWidth: '3rem'
         },
         label: {
             fontWeight: '500'
diff --git a/packages/themes/src/presets/lara/button/index.js b/packages/themes/src/presets/lara/button/index.js
index 4198b3dd2..a7b672c55 100644
--- a/packages/themes/src/presets/lara/button/index.js
+++ b/packages/themes/src/presets/lara/button/index.js
@@ -9,12 +9,14 @@ export default {
         sm: {
             fontSize: '{form.field.sm.font.size}',
             paddingX: '{form.field.sm.padding.x}',
-            paddingY: '{form.field.sm.padding.y}'
+            paddingY: '{form.field.sm.padding.y}',
+            iconOnlyWidth: '2.25rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
             paddingX: '{form.field.lg.padding.x}',
-            paddingY: '{form.field.lg.padding.y}'
+            paddingY: '{form.field.lg.padding.y}',
+            iconOnlyWidth: '3.25rem'
         },
         label: {
             fontWeight: '600'
diff --git a/packages/themes/src/presets/material/button/index.js b/packages/themes/src/presets/material/button/index.js
index 1c1c100a7..6a6b13890 100644
--- a/packages/themes/src/presets/material/button/index.js
+++ b/packages/themes/src/presets/material/button/index.js
@@ -9,12 +9,14 @@ export default {
         sm: {
             fontSize: '{form.field.sm.font.size}',
             paddingX: '{form.field.sm.padding.x}',
-            paddingY: '{form.field.sm.padding.y}'
+            paddingY: '{form.field.sm.padding.y}',
+            iconOnlyWidth: '2.5rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
             paddingX: '{form.field.lg.padding.x}',
-            paddingY: '{form.field.lg.padding.y}'
+            paddingY: '{form.field.lg.padding.y}',
+            iconOnlyWidth: '3.5rem'
         },
         label: {
             fontWeight: '500'
diff --git a/packages/themes/src/presets/nora/button/index.js b/packages/themes/src/presets/nora/button/index.js
index 6f22942f0..72b4dfeb4 100644
--- a/packages/themes/src/presets/nora/button/index.js
+++ b/packages/themes/src/presets/nora/button/index.js
@@ -9,12 +9,14 @@ export default {
         sm: {
             fontSize: '{form.field.sm.font.size}',
             paddingX: '{form.field.sm.padding.x}',
-            paddingY: '{form.field.sm.padding.y}'
+            paddingY: '{form.field.sm.padding.y}',
+            iconOnlyWidth: '2rem'
         },
         lg: {
             fontSize: '{form.field.lg.font.size}',
             paddingX: '{form.field.lg.padding.x}',
-            paddingY: '{form.field.lg.padding.y}'
+            paddingY: '{form.field.lg.padding.y}',
+            iconOnlyWidth: '3rem'
         },
         label: {
             fontWeight: '700'
diff --git a/packages/themes/types/button/index.d.ts b/packages/themes/types/button/index.d.ts
index d9e2cf2a5..46a7a4103 100644
--- a/packages/themes/types/button/index.d.ts
+++ b/packages/themes/types/button/index.d.ts
@@ -73,6 +73,12 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
              * @designToken button.sm.padding.y
              */
             paddingY?: string;
+            /**
+             * Sm icon only width of root
+             *
+             * @designToken button.sm.icon.only.width
+             */
+            iconOnlyWidth?: string;
         };
         /**
          * Lg of root
@@ -96,6 +102,12 @@ export interface ButtonDesignTokens extends ColorSchemeDesignToken<ButtonDesignT
              * @designToken button.lg.padding.y
              */
             paddingY?: string;
+            /**
+             * Lg icon only width of root
+             *
+             * @designToken button.lg.icon.only.width
+             */
+            iconOnlyWidth?: string;
         };
         /**
          * Label of root