From a8b01e31a42d6fb0093fe63e25f67031ef0304fe Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Mon, 28 Oct 2024 14:53:33 +0300
Subject: [PATCH] Fixed #6658 - Add variant prop to Button

---
 apps/showcase/doc/button/BadgeDoc.vue         |   8 +-
 apps/showcase/doc/button/DisabledDoc.vue      |   2 +-
 apps/showcase/doc/button/IconOnlyDoc.vue      | 192 +++++++++---------
 apps/showcase/doc/button/LinkDoc.vue          |   8 +-
 apps/showcase/doc/button/OutlinedDoc.vue      |  66 +++---
 apps/showcase/doc/button/RaisedTextDoc.vue    |  66 +++---
 apps/showcase/doc/button/TemplateDoc.vue      |   8 +-
 apps/showcase/doc/button/TextDoc.vue          |  64 +++---
 packages/primevue/src/button/BaseButton.vue   |   4 +
 packages/primevue/src/button/Button.d.ts      |   5 +
 .../primevue/src/button/style/ButtonStyle.js  |   6 +-
 packages/primevue/src/message/Message.d.ts    |   4 +-
 12 files changed, 221 insertions(+), 212 deletions(-)

diff --git a/apps/showcase/doc/button/BadgeDoc.vue b/apps/showcase/doc/button/BadgeDoc.vue
index c9b51773a..588cf03e9 100644
--- a/apps/showcase/doc/button/BadgeDoc.vue
+++ b/apps/showcase/doc/button/BadgeDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -16,13 +16,13 @@ export default {
             code: {
                 basic: `
 <Button type="button" label="Emails" badge="2" />
-<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
+<Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
 `,
                 options: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
     </div>
 </template>
 
@@ -33,7 +33,7 @@ export default {
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
         <Button type="button" label="Emails" badge="2" />
-        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" outlined />
+        <Button type="button" label="Messages" icon="pi pi-users" badge="2" badgeSeverity="contrast" variant="outlined"  />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/button/DisabledDoc.vue b/apps/showcase/doc/button/DisabledDoc.vue
index 0d1726da0..7699ec631 100644
--- a/apps/showcase/doc/button/DisabledDoc.vue
+++ b/apps/showcase/doc/button/DisabledDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
+        <p>When <i>disabled</i> is present, the element cannot be used.</p>
     </DocSectionText>
     <div class="card flex justify-center">
         <Button label="Submit" disabled />
diff --git a/apps/showcase/doc/button/IconOnlyDoc.vue b/apps/showcase/doc/button/IconOnlyDoc.vue
index 4a7095fa4..18fe197d0 100644
--- a/apps/showcase/doc/button/IconOnlyDoc.vue
+++ b/apps/showcase/doc/button/IconOnlyDoc.vue
@@ -26,36 +26,36 @@
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />
+            <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" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -85,32 +85,32 @@ export default {
 <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" 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="warn" 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" />
-<Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />
+<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" 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="warn" 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" />
-<Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />
+<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" 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="warn" 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" />
-<Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />
+<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" />
 `,
                 options: `
 <template>
@@ -138,36 +138,36 @@ export default {
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />
+            <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" />
         </div>
     </div>
 </template>
@@ -201,36 +201,36 @@ export default {
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" rounded outlined aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4 mb-6">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text raised rounded aria-label="Star" />
+            <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" />
         </div>
 
         <div class="flex flex-wrap justify-center gap-4">
-            <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="warn" 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" />
-            <Button icon="pi pi-star" severity="contrast" text rounded aria-label="Star" />
+            <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" />
         </div>
     </div>
 </template>
diff --git a/apps/showcase/doc/button/LinkDoc.vue b/apps/showcase/doc/button/LinkDoc.vue
index e825b2054..e894c6658 100644
--- a/apps/showcase/doc/button/LinkDoc.vue
+++ b/apps/showcase/doc/button/LinkDoc.vue
@@ -3,7 +3,7 @@
         <p>The button element can be displayed as a link element visually when the <i>link</i> property is present. If you need to use buttons for actual navigations, use the <i>as</i> property to customize the rendered element.</p>
     </DocSectionText>
     <div class="card flex justify-center gap-4">
-        <Button label="Link" link />
+        <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
         <Button as="router-link" label="Router" to="/" />
     </div>
@@ -16,14 +16,14 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Link" link />
+<Button label="Link" variant="link" />
 <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
 <Button as="router-link" label="Router" to="/" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center gap-4">
-        <Button label="Link" link />
+        <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
         <Button as="router-link" label="Router" to="/" />
     </div>
@@ -35,7 +35,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center gap-4">
-        <Button label="Link" link />
+        <Button label="Link" variant="link" />
         <Button as="a" label="External" href="https://vuejs.org/" target="_blank" rel="noopener" />
         <Button as="router-link" label="Router" to="/" />
     </div>
diff --git a/apps/showcase/doc/button/OutlinedDoc.vue b/apps/showcase/doc/button/OutlinedDoc.vue
index bd9778461..83763d247 100644
--- a/apps/showcase/doc/button/OutlinedDoc.vue
+++ b/apps/showcase/doc/button/OutlinedDoc.vue
@@ -1,16 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Outlined buttons display a border without a background initially.</p>
+        <p>Outlined buttons display a border without a transparent background.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" outlined />
-        <Button label="Secondary" severity="secondary" outlined />
-        <Button label="Success" severity="success" outlined />
-        <Button label="Info" severity="info" outlined />
-        <Button label="Warn" severity="warn" outlined />
-        <Button label="Help" severity="help" outlined />
-        <Button label="Danger" severity="danger" outlined />
-        <Button label="Contrast" severity="contrast" outlined />
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,26 +21,26 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" outlined />
-<Button label="Secondary" severity="secondary" outlined />
-<Button label="Success" severity="success" outlined />
-<Button label="Info" severity="info" outlined />
-<Button label="Warn" severity="warn" outlined />
-<Button label="Help" severity="help" outlined />
-<Button label="Danger" severity="danger" outlined />
-<Button label="Contrast" severity="contrast" outlined />
+<Button label="Primary" variant="outlined" />
+<Button label="Secondary" severity="secondary" variant="outlined" />
+<Button label="Success" severity="success" variant="outlined" />
+<Button label="Info" severity="info" variant="outlined" />
+<Button label="Warn" severity="warn" variant="outlined" />
+<Button label="Help" severity="help" variant="outlined" />
+<Button label="Danger" severity="danger" variant="outlined" />
+<Button label="Contrast" severity="contrast" variant="outlined" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" outlined />
-        <Button label="Secondary" severity="secondary" outlined />
-        <Button label="Success" severity="success" outlined />
-        <Button label="Info" severity="info" outlined />
-        <Button label="Warn" severity="warn" outlined />
-        <Button label="Help" severity="help" outlined />
-        <Button label="Danger" severity="danger" outlined />
-        <Button label="Contrast" severity="contrast" outlined />
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
     </div>
 </template>
 
@@ -50,14 +50,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" outlined />
-        <Button label="Secondary" severity="secondary" outlined />
-        <Button label="Success" severity="success" outlined />
-        <Button label="Info" severity="info" outlined />
-        <Button label="Warn" severity="warn" outlined />
-        <Button label="Help" severity="help" outlined />
-        <Button label="Danger" severity="danger" outlined />
-        <Button label="Contrast" severity="contrast" outlined />
+        <Button label="Primary" variant="outlined" />
+        <Button label="Secondary" severity="secondary" variant="outlined" />
+        <Button label="Success" severity="success" variant="outlined" />
+        <Button label="Info" severity="info" variant="outlined" />
+        <Button label="Warn" severity="warn" variant="outlined" />
+        <Button label="Help" severity="help" variant="outlined" />
+        <Button label="Danger" severity="danger" variant="outlined" />
+        <Button label="Contrast" severity="contrast" variant="outlined" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/button/RaisedTextDoc.vue b/apps/showcase/doc/button/RaisedTextDoc.vue
index 0b21edfea..5416b3c12 100644
--- a/apps/showcase/doc/button/RaisedTextDoc.vue
+++ b/apps/showcase/doc/button/RaisedTextDoc.vue
@@ -1,16 +1,16 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Text buttons can be displayed as raised as well for elevation.</p>
+        <p>Text buttons can be displayed elevated with the <i>raised</i> option.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
-        <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="Warn" severity="warn" text raised />
-        <Button label="Help" severity="help" text raised />
-        <Button label="Danger" severity="danger" text raised />
-        <Button label="Contrast" severity="contrast" text raised />
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,26 +21,26 @@ export default {
         return {
             code: {
                 basic: `
-<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="Warn" severity="warn" text raised />
-<Button label="Help" severity="help" text raised />
-<Button label="Danger" severity="danger" text raised />
-<Button label="Contrast" severity="contrast" text raised />
+<Button label="Primary" variant="text" raised />
+<Button label="Secondary" severity="secondary" variant="text" raised />
+<Button label="Success" severity="success" variant="text" raised />
+<Button label="Info" severity="info" variant="text" raised />
+<Button label="Warn" severity="warn" variant="text" raised />
+<Button label="Help" severity="help" variant="text" raised />
+<Button label="Danger" severity="danger" variant="text" raised />
+<Button label="Contrast" severity="contrast" variant="text" raised />
 `,
                 options: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <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="Warn" severity="warn" text raised />
-        <Button label="Help" severity="help" text raised />
-        <Button label="Danger" severity="danger" text raised />
-        <Button label="Contrast" severity="contrast" text raised />
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
     </div>
 </template>
 
@@ -50,14 +50,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <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="Warn" severity="warn" text raised />
-        <Button label="Help" severity="help" text raised />
-        <Button label="Danger" severity="danger" text raised />
-        <Button label="Contrast" severity="contrast" text raised />
+        <Button label="Primary" variant="text" raised />
+        <Button label="Secondary" severity="secondary" variant="text" raised />
+        <Button label="Success" severity="success" variant="text" raised />
+        <Button label="Info" severity="info" variant="text" raised />
+        <Button label="Warn" severity="warn" variant="text" raised />
+        <Button label="Help" severity="help" variant="text" raised />
+        <Button label="Danger" severity="danger" variant="text" raised />
+        <Button label="Contrast" severity="contrast" variant="text" raised />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/button/TemplateDoc.vue b/apps/showcase/doc/button/TemplateDoc.vue
index 13eebfc3d..b08d38218 100644
--- a/apps/showcase/doc/button/TemplateDoc.vue
+++ b/apps/showcase/doc/button/TemplateDoc.vue
@@ -3,7 +3,7 @@
         <p>Custom content inside a button is defined as children.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <Button outlined class="!border-2">
+        <Button variant="outlined" class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -25,7 +25,7 @@ export default {
         return {
             code: {
                 basic: `
-<Button outlined class="!border-2">
+<Button variant="outlined" class="!border-2">
     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="..." fill="var(--p-primary-color)" />
         <path d="..." fill="var(--p-text-color)" />
@@ -35,7 +35,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-center">
-        <Button outlined class="!border-2">
+        <Button variant="outlined" class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
@@ -56,7 +56,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <Button outlined class="!border-2">
+        <Button variant="outlined" class="!border-2">
             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
diff --git a/apps/showcase/doc/button/TextDoc.vue b/apps/showcase/doc/button/TextDoc.vue
index 3d352b8cd..dd0714b45 100644
--- a/apps/showcase/doc/button/TextDoc.vue
+++ b/apps/showcase/doc/button/TextDoc.vue
@@ -3,14 +3,14 @@
         <p>Text buttons are displayed as textual elements.</p>
     </DocSectionText>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" text />
-        <Button label="Secondary" severity="secondary" text />
-        <Button label="Success" severity="success" text />
-        <Button label="Info" severity="info" text />
-        <Button label="Warn" severity="warn" text />
-        <Button label="Help" severity="help" text />
-        <Button label="Danger" severity="danger" text />
-        <Button label="Contrast" severity="contrast" text />
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -21,26 +21,26 @@ export default {
         return {
             code: {
                 basic: `
-<Button label="Primary" text />
-<Button label="Secondary" severity="secondary" text />
-<Button label="Success" severity="success" text />
-<Button label="Info" severity="info" text />
-<Button label="Warn" severity="warn" text />
-<Button label="Help" severity="help" text />
-<Button label="Danger" severity="danger" text />
-<Button label="Contrast" severity="contrast" text />
+<Button label="Primary" variant="text" />
+<Button label="Secondary" severity="secondary" variant="text" />
+<Button label="Success" severity="success" variant="text" />
+<Button label="Info" severity="info" variant="text" />
+<Button label="Warn" severity="warn" variant="text" />
+<Button label="Help" severity="help" variant="text" />
+<Button label="Danger" severity="danger" variant="text" />
+<Button label="Contrast" severity="contrast" variant="text" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" text />
-        <Button label="Secondary" severity="secondary" text />
-        <Button label="Success" severity="success" text />
-        <Button label="Info" severity="info" text />
-        <Button label="Warn" severity="warn" text />
-        <Button label="Help" severity="help" text />
-        <Button label="Danger" severity="danger" text />
-        <Button label="Contrast" severity="contrast" text />
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
     </div>
 </template>
 
@@ -50,14 +50,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center flex-wrap gap-4">
-        <Button label="Primary" text />
-        <Button label="Secondary" severity="secondary" text />
-        <Button label="Success" severity="success" text />
-        <Button label="Info" severity="info" text />
-        <Button label="Warn" severity="warn" text />
-        <Button label="Help" severity="help" text />
-        <Button label="Danger" severity="danger" text />
-        <Button label="Contrast" severity="contrast" text />
+        <Button label="Primary" variant="text" />
+        <Button label="Secondary" severity="secondary" variant="text" />
+        <Button label="Success" severity="success" variant="text" />
+        <Button label="Info" severity="info" variant="text" />
+        <Button label="Warn" severity="warn" variant="text" />
+        <Button label="Help" severity="help" variant="text" />
+        <Button label="Danger" severity="danger" variant="text" />
+        <Button label="Contrast" severity="contrast" variant="text" />
     </div>
 </template>
 
diff --git a/packages/primevue/src/button/BaseButton.vue b/packages/primevue/src/button/BaseButton.vue
index 3a5535b35..b6a16f5e9 100644
--- a/packages/primevue/src/button/BaseButton.vue
+++ b/packages/primevue/src/button/BaseButton.vue
@@ -78,6 +78,10 @@ export default {
             type: String,
             default: null
         },
+        variant: {
+            type: String,
+            default: null
+        },
         plain: {
             type: Boolean,
             default: false
diff --git a/packages/primevue/src/button/Button.d.ts b/packages/primevue/src/button/Button.d.ts
index af71feeb6..05decaee4 100755
--- a/packages/primevue/src/button/Button.d.ts
+++ b/packages/primevue/src/button/Button.d.ts
@@ -172,6 +172,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Defines the size of the button.
      */
     size?: 'small' | 'large' | undefined;
+    /**
+     * Specifies the variant of the component.
+     * @defaultValue undefined
+     */
+    variant?: 'outlined' | 'text' | undefined;
     /**
      * Add a plain textual class to the button without a background initially.
      * @defaultValue false
diff --git a/packages/primevue/src/button/style/ButtonStyle.js b/packages/primevue/src/button/style/ButtonStyle.js
index 63fa8bb34..014dfd615 100644
--- a/packages/primevue/src/button/style/ButtonStyle.js
+++ b/packages/primevue/src/button/style/ButtonStyle.js
@@ -625,12 +625,12 @@ const classes = {
             'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
             'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
             'p-button-loading': props.loading,
-            'p-button-link': props.link,
+            'p-button-link': props.link || props.variant === 'link',
             [`p-button-${props.severity}`]: props.severity,
             'p-button-raised': props.raised,
             'p-button-rounded': props.rounded,
-            'p-button-text': props.text,
-            'p-button-outlined': props.outlined,
+            'p-button-text': props.text || props.variant === 'text',
+            'p-button-outlined': props.outlined || props.variant === 'outlined',
             'p-button-sm': props.size === 'small',
             'p-button-lg': props.size === 'large',
             'p-button-plain': props.plain,
diff --git a/packages/primevue/src/message/Message.d.ts b/packages/primevue/src/message/Message.d.ts
index f401798ac..3e0924a47 100755
--- a/packages/primevue/src/message/Message.d.ts
+++ b/packages/primevue/src/message/Message.d.ts
@@ -161,8 +161,8 @@ export interface MessageProps {
      */
     size?: 'small' | 'large' | undefined;
     /**
-     * Specifies the input variant of the component.
-     * @defaultValue outlined
+     * Specifies the variant of the component.
+     * @defaultValue undefined
      */
     variant?: 'outlined' | 'simple' | undefined;
 }