diff --git a/docs/en-US/component/radio.md b/docs/en-US/component/radio.md
index 0c5c2353cd..a16fa3d5be 100644
--- a/docs/en-US/component/radio.md
+++ b/docs/en-US/component/radio.md
@@ -71,6 +71,16 @@ radio/button-style
:::
+## Button style
+
+Radio with button styles.
+
+:::demo You can set the style of the button when it is active by using `fill` and `text-color`.
+
+radio/button-fill-textcolor
+
+:::
+
## With borders
:::demo The `border` attribute adds a border to Radios.
@@ -109,18 +119,16 @@ radio/with-borders
### RadioGroup Attributes
-| Name | Description | Type | Default |
-| --------------------------- | ------------------------------------------------- | ---------------------------------- | ------- |
-| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
-| size | the size of radio buttons or bordered radios | ^[string] | default |
-| disabled | whether the nesting radios are disabled | ^[boolean] | false |
-| text-color | font color when button is active | ^[string] | #ffffff |
-| fill | border and background color when button is active | ^[string] | #409eff |
-| validate-event | whether to trigger form validation | ^[boolean] | true |
-| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in RadioGroup | ^[string] | — |
-| name | native `name` attribute | ^[string] | — |
-| id | native `id` attribute | ^[string] | — |
-| label ^(a11y) ^(deprecated) | same as `aria-label` in RadioGroup | ^[string] | — |
+| Name | Description | Type | Default |
+| --------------------------- | -------------------------------------------- | ---------------------------------- | ------- |
+| model-value / v-model | binding value | ^[string] / ^[number] / ^[boolean] | — |
+| size | the size of radio buttons or bordered radios | ^[string] | default |
+| disabled | whether the nesting radios are disabled | ^[boolean] | false |
+| validate-event | whether to trigger form validation | ^[boolean] | true |
+| aria-label ^(a11y) ^(2.7.2) | same as `aria-label` in RadioGroup | ^[string] | — |
+| name | native `name` attribute | ^[string] | — |
+| id | native `id` attribute | ^[string] | — |
+| label ^(a11y) ^(deprecated) | same as `aria-label` in RadioGroup | ^[string] | — |
### RadioGroup Events
@@ -144,6 +152,8 @@ radio/with-borders
| label | the label of Radio. If there's no `value`, `label` will act as `value` | ^[string] / ^[number] / ^[boolean] | — |
| disabled | whether Radio is disabled | ^[boolean] | false |
| name | native 'name' attribute | ^[string] | — |
+| text-color | font color when button is active | ^[string] | #ffffff |
+| fill | border and background color when button is active | ^[string] | #409eff |
### RadioButton Slots
diff --git a/docs/examples/radio/button-fill-textcolor.vue b/docs/examples/radio/button-fill-textcolor.vue
new file mode 100644
index 0000000000..4c86ea8dfa
--- /dev/null
+++ b/docs/examples/radio/button-fill-textcolor.vue
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+