From 0975f411103f39756bf5e0680ee59f539e0c9cd8 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 14 Jan 2025 15:50:15 +0300
Subject: [PATCH 1/2] Fixed #7017 - Size support for Icon Only Buttons

---
 apps/showcase/doc/button/IconOnlyDoc.vue      | 281 ++++++++++--------
 .../primevue/src/button/style/ButtonStyle.js  |  16 +
 .../themes/src/presets/aura/button/index.js   |   6 +-
 .../themes/src/presets/lara/button/index.js   |   6 +-
 .../src/presets/material/button/index.js      |   6 +-
 .../themes/src/presets/nora/button/index.js   |   6 +-
 packages/themes/types/button/index.d.ts       |  12 +
 7 files changed, 202 insertions(+), 131 deletions(-)

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

From 855994886a3c946be0de6d62d6f7f0301a564add Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Tue, 14 Jan 2025 12:51:33 +0000
Subject: [PATCH 2/2] Update API doc

---
 apps/showcase/doc/common/apidoc/index.json | 18 +++++++
 pnpm-lock.yaml                             | 58 +++++++++++-----------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/apps/showcase/doc/common/apidoc/index.json b/apps/showcase/doc/common/apidoc/index.json
index 2d0ec4bf0..cd379b3d3 100644
--- a/apps/showcase/doc/common/apidoc/index.json
+++ b/apps/showcase/doc/common/apidoc/index.json
@@ -76251,6 +76251,15 @@
                             "default": "",
                             "description": "Sm padding y of root"
                         },
+                        {
+                            "name": "sm.iconOnlyWidth",
+                            "token": "button.sm.icon.only.width",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Sm icon only width of root"
+                        },
                         {
                             "name": "lg.fontSize",
                             "token": "button.lg.font.size",
@@ -76278,6 +76287,15 @@
                             "default": "",
                             "description": "Lg padding y of root"
                         },
+                        {
+                            "name": "lg.iconOnlyWidth",
+                            "token": "button.lg.icon.only.width",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Lg icon only width of root"
+                        },
                         {
                             "name": "label.fontWeight",
                             "token": "button.label.font.weight",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 08a8c3f05..eb6e4a108 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4878,8 +4878,8 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
-  pkg-types@1.3.0:
-    resolution: {integrity: sha512-kS7yWjVFCkIw9hqdJBoMxDdzEngmkr5FXeWZZfQ6GoYacjVnsW6l2CcYW/0ThD0vF4LPJgVYnrg4d0uuhwYQbg==}
+  pkg-types@1.3.1:
+    resolution: {integrity: sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ==}
 
   pluralize@8.0.0:
     resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
@@ -8253,7 +8253,7 @@ snapshots:
       global-dirs: 3.0.1
       magicast: 0.3.5
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       prompts: 2.4.2
       rc9: 2.1.2
       semver: 7.6.3
@@ -8286,7 +8286,7 @@ snapshots:
       pacote: 17.0.7
       pathe: 1.1.2
       perfect-debounce: 1.0.0
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       rc9: 2.1.2
       semver: 7.6.3
       simple-git: 3.27.0
@@ -8331,7 +8331,7 @@ snapshots:
       mlly: 1.7.4
       ohash: 1.1.4
       pathe: 2.0.1
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.6.3
       ufo: 1.5.4
@@ -8358,7 +8358,7 @@ snapshots:
       mlly: 1.7.4
       ohash: 1.1.4
       pathe: 2.0.1
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.6.3
       ufo: 1.5.4
@@ -8384,7 +8384,7 @@ snapshots:
       lodash.template: 4.5.0
       mlly: 1.7.4
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.6.3
       unctx: 2.4.1
@@ -8409,7 +8409,7 @@ snapshots:
       lodash.template: 4.5.0
       mlly: 1.7.4
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.6.3
       unctx: 2.4.1
@@ -8430,7 +8430,7 @@ snapshots:
       mlly: 1.7.4
       nuxi: 3.3.2
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       tsconfck: 3.1.4(typescript@5.7.3)
       unbuild: 2.0.0(typescript@5.7.3)
     transitivePeerDependencies:
@@ -8454,7 +8454,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.7
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       postcss-import-resolver: 2.0.0
       scule: 1.3.0
       std-env: 3.8.0
@@ -8474,7 +8474,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 1.21.7
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       postcss-import-resolver: 2.0.0
       scule: 1.3.0
       std-env: 3.8.0
@@ -8600,7 +8600,7 @@ snapshots:
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 0.1.3
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       postcss: 8.5.1
       postcss-import: 15.1.0(postcss@8.5.1)
       postcss-url: 10.1.3(postcss@8.5.1)
@@ -8659,7 +8659,7 @@ snapshots:
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 0.1.3
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       postcss: 8.5.1
       postcss-import: 15.1.0(postcss@8.5.1)
       postcss-url: 10.1.3(postcss@8.5.1)
@@ -9858,7 +9858,7 @@ snapshots:
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       rc9: 2.1.2
     optionalDependencies:
       magicast: 0.3.5
@@ -9875,7 +9875,7 @@ snapshots:
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 1.0.0
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       rc9: 2.1.2
     optionalDependencies:
       magicast: 0.3.5
@@ -9940,7 +9940,7 @@ snapshots:
       ofetch: 1.4.1
       open: 10.1.0
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       semver: 7.6.3
       std-env: 3.8.0
@@ -11444,12 +11444,12 @@ snapshots:
   local-pkg@0.5.1:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
 
   local-pkg@1.0.0:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
 
   locate-path@6.0.0:
     dependencies:
@@ -11684,7 +11684,7 @@ snapshots:
       jiti: 1.21.7
       mlly: 1.7.4
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       postcss: 8.5.1
       postcss-nested: 6.2.0(postcss@8.5.1)
       semver: 7.6.3
@@ -11696,7 +11696,7 @@ snapshots:
     dependencies:
       acorn: 8.14.0
       pathe: 2.0.1
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       ufo: 1.5.4
 
   mri@1.2.0: {}
@@ -11773,7 +11773,7 @@ snapshots:
       openapi-typescript: 7.5.2(encoding@0.1.13)(typescript@5.7.3)
       pathe: 1.1.2
       perfect-debounce: 1.0.0
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       radix3: 1.1.2
       rollup: 4.30.1
@@ -11863,7 +11863,7 @@ snapshots:
       ohash: 1.1.4
       pathe: 1.1.2
       perfect-debounce: 0.1.3
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       radix3: 1.1.2
       rollup: 3.29.5
@@ -12202,7 +12202,7 @@ snapshots:
       consola: 3.4.0
       execa: 8.0.1
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       ufo: 1.5.4
 
   object-assign@4.1.1: {}
@@ -12406,11 +12406,11 @@ snapshots:
 
   pirates@4.0.6: {}
 
-  pkg-types@1.3.0:
+  pkg-types@1.3.1:
     dependencies:
       confbox: 0.1.8
       mlly: 1.7.4
-      pathe: 1.1.2
+      pathe: 2.0.1
 
   pluralize@8.0.0: {}
 
@@ -13708,7 +13708,7 @@ snapshots:
       mkdist: 1.6.0(typescript@5.7.3)
       mlly: 1.7.4
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       pretty-bytes: 6.1.1
       rollup: 3.29.5
       rollup-plugin-dts: 6.1.1(rollup@3.29.5)(typescript@5.7.3)
@@ -13772,7 +13772,7 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.1
       picomatch: 4.0.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       strip-literal: 2.1.1
       unplugin: 1.16.1
@@ -13791,7 +13791,7 @@ snapshots:
       mlly: 1.7.4
       pathe: 2.0.1
       picomatch: 4.0.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       scule: 1.3.0
       strip-literal: 2.1.1
       unplugin: 1.16.1
@@ -13881,7 +13881,7 @@ snapshots:
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 1.1.2
-      pkg-types: 1.3.0
+      pkg-types: 1.3.1
       unplugin: 1.16.1
 
   update-browserslist-db@1.1.2(browserslist@4.24.4):