From bc71cba2d24da357f10a60fe069771794d3ca3fb Mon Sep 17 00:00:00 2001
From: Noblet Ouways <91417411+Dsaquel@users.noreply.github.com>
Date: Tue, 19 Aug 2025 17:08:31 +0200
Subject: [PATCH] feat(components): [config-provider/button] add text prop
 (#21806)

---
 docs/en-US/component/config-provider.md                     | 1 +
 docs/examples/config-provider/button.vue                    | 2 ++
 packages/components/button/src/button.ts                    | 6 +++++-
 packages/components/button/src/button.vue                   | 3 ++-
 packages/components/button/src/use-button.ts                | 2 ++
 .../config-provider/__tests__/config-provider.test.tsx      | 3 ++-
 6 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/docs/en-US/component/config-provider.md b/docs/en-US/component/config-provider.md
index 6f94138887..420dd0f33c 100644
--- a/docs/en-US/component/config-provider.md
+++ b/docs/en-US/component/config-provider.md
@@ -114,6 +114,7 @@ In this section, you can learn how to use Config Provider to provide experimenta
 | type ^(2.9.11)  | button type, when setting `color`, the latter prevails                                                                                               | ^[enum]`'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'text' (deprecated)` | —       |
 | autoInsertSpace | automatically insert a space between two chinese characters(this will only take effect when the text length is 2 and all characters are in Chinese.) | ^[boolean]                                                                                | false   |
 | plain ^(2.9.11) | determine whether it's a plain button                                                                                                                | ^[boolean]                                                                                | false   |
+| text ^(2.11.0)  | determine whether it's a text button                                                                                                                 | ^[boolean]                                                                                | false   |
 | round ^(2.9.11) | determine whether it's a round button                                                                                                                | ^[boolean]                                                                                | false   |
 
 ### Link Attribute
diff --git a/docs/examples/config-provider/button.vue b/docs/examples/config-provider/button.vue
index a8e2d19c0f..f039c6790d 100644
--- a/docs/examples/config-provider/button.vue
+++ b/docs/examples/config-provider/button.vue
@@ -6,6 +6,7 @@
       </el-checkbox>
       <el-checkbox v-model="config.plain"> plain </el-checkbox>
       <el-checkbox v-model="config.round"> round </el-checkbox>
+      <el-checkbox v-model="config.text"> text </el-checkbox>
       <el-select v-model="config.type" class="ml-5" style="max-width: 150px">
         <el-option
           v-for="type in buttonTypes.filter(Boolean)"
@@ -30,5 +31,6 @@ const config = reactive({
   type: 'default',
   plain: true,
   round: true,
+  text: false,
 })
 </script>
diff --git a/packages/components/button/src/button.ts b/packages/components/button/src/button.ts
index 4d41934c83..82dbaba543 100644
--- a/packages/components/button/src/button.ts
+++ b/packages/components/button/src/button.ts
@@ -72,7 +72,10 @@ export const buttonProps = buildProps({
   /**
    * @description determine whether it's a text button
    */
-  text: Boolean,
+  text: {
+    type: Boolean,
+    default: undefined,
+  },
   /**
    * @description determine whether it's a link button
    */
@@ -133,6 +136,7 @@ export type ButtonNativeType = ButtonProps['nativeType']
 export interface ButtonConfigContext {
   type?: string
   plain?: boolean
+  text?: boolean
   round?: boolean
   autoInsertSpace?: boolean
 }
diff --git a/packages/components/button/src/button.vue b/packages/components/button/src/button.vue
index df3462afa5..ed7493f80e 100644
--- a/packages/components/button/src/button.vue
+++ b/packages/components/button/src/button.vue
@@ -51,6 +51,7 @@ const {
   _props,
   _plain,
   _round,
+  _text,
   shouldAddSpace,
   handleClick,
 } = useButton(props, emit)
@@ -63,7 +64,7 @@ const buttonKls = computed(() => [
   ns.is('plain', _plain.value),
   ns.is('round', _round.value),
   ns.is('circle', props.circle),
-  ns.is('text', props.text),
+  ns.is('text', _text.value),
   ns.is('link', props.link),
   ns.is('has-bg', props.bg),
 ])
diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts
index 8c0104d9b1..b96bf53465 100644
--- a/packages/components/button/src/use-button.ts
+++ b/packages/components/button/src/use-button.ts
@@ -47,6 +47,7 @@ export const useButton = (
   const _round = computed(
     () => props.round ?? globalConfig.value?.round ?? false
   )
+  const _text = computed(() => props.text ?? globalConfig.value?.text ?? false)
 
   const _props = computed(() => {
     if (props.tag === 'button') {
@@ -92,6 +93,7 @@ export const useButton = (
     _props,
     _plain,
     _round,
+    _text,
     shouldAddSpace,
     handleClick,
   }
diff --git a/packages/components/config-provider/__tests__/config-provider.test.tsx b/packages/components/config-provider/__tests__/config-provider.test.tsx
index e7120030cb..756e780df9 100644
--- a/packages/components/config-provider/__tests__/config-provider.test.tsx
+++ b/packages/components/config-provider/__tests__/config-provider.test.tsx
@@ -139,6 +139,7 @@ describe('config-provider', () => {
         plain: true,
         round: true,
         autoInsertSpace: true,
+        text: true,
       })
 
       const wrapper = mount(() => (
@@ -150,7 +151,7 @@ describe('config-provider', () => {
       expect(
         wrapper
           .find(
-            '.el-button.el-button--warning.is-plain.is-round .el-button__text--expand'
+            '.el-button.el-button--warning.is-plain.is-round.is-text .el-button__text--expand'
           )
           .exists()
       ).toBe(true)