diff --git a/docs/en-US/component/button.md b/docs/en-US/component/button.md
index ad12b88e42..a5ad426cd4 100644
--- a/docs/en-US/component/button.md
+++ b/docs/en-US/component/button.md
@@ -123,10 +123,10 @@ button/custom
 
 ## Button-Group Attributes
 
-| Attribute | Description                                      | Type   | Accepted Values             | Default |
-| --------- | ------------------------------------------------ | ------ | --------------------------- | ------- |
-| size      | control the size of buttons in this button-group | string | large / small               | —       |
-| type      | control the type of buttons in this button-group | string | primary / success / warning | —       |
+| Attribute | Description                                      | Type   | Accepted Values       | Default |
+| --------- | ------------------------------------------------ | ------ | --------------------- | ------- |
+| size      | control the size of buttons in this button-group | string | same as button's size | —       |
+| type      | control the type of buttons in this button-group | string | same as button's type | —       |
 
 ## Button-Group Slots
 
diff --git a/packages/components/button/src/button-group.vue b/packages/components/button/src/button-group.vue
index 6cf95ebcf8..1bff662594 100644
--- a/packages/components/button/src/button-group.vue
+++ b/packages/components/button/src/button-group.vue
@@ -3,28 +3,22 @@
     <slot></slot>
   </div>
 </template>
-<script lang="ts">
-import { defineComponent, provide, reactive, toRef } from 'vue'
+<script lang="ts" setup>
+import { provide, reactive, toRef } from 'vue'
 import { buttonGroupContextKey } from '@element-plus/tokens'
 import { useNamespace } from '@element-plus/hooks'
 import { buttonGroupProps } from './button-group'
 
-export default defineComponent({
+defineOptions({
   name: 'ElButtonGroup',
-  props: buttonGroupProps,
-
-  setup(props) {
-    provide(
-      buttonGroupContextKey,
-      reactive({
-        size: toRef(props, 'size'),
-        type: toRef(props, 'type'),
-      })
-    )
-    const ns = useNamespace('button')
-    return {
-      ns,
-    }
-  },
 })
+const props = defineProps(buttonGroupProps)
+provide(
+  buttonGroupContextKey,
+  reactive({
+    size: toRef(props, 'size'),
+    type: toRef(props, 'type'),
+  })
+)
+const ns = useNamespace('button')
 </script>