diff --git a/src/components/button/button.less b/src/components/button/button.less
index 9dae61476e..aa1a2328c7 100644
--- a/src/components/button/button.less
+++ b/src/components/button/button.less
@@ -91,6 +91,9 @@
   &-warning {
     --color: var(--adm-color-warning);
   }
+  &-link {
+    color: var(--adm-color-link);
+  }
 
   &-block {
     display: block;
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index 04dfb5555c..b2b2bd467e 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,15 +1,15 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import classNames from 'classnames'
 import type {
-  ReactNode,
   ButtonHTMLAttributes,
   DetailedHTMLProps,
   MouseEventHandler,
+  ReactNode,
 } from 'react'
-import classNames from 'classnames'
-import DotLoading from '../dot-loading'
-import { mergeProps } from '../../utils/with-default-props'
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'
 import { NativeProps, withNativeProps } from '../../utils/native-props'
 import { isPromise } from '../../utils/validate'
+import { mergeProps } from '../../utils/with-default-props'
+import DotLoading from '../dot-loading'
 
 const classPrefix = `adm-button`
 
@@ -19,7 +19,7 @@ type NativeButtonProps = DetailedHTMLProps<
 >
 
 export type ButtonProps = {
-  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger'
+  color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'link'
   fill?: 'solid' | 'outline' | 'none'
   size?: 'mini' | 'small' | 'middle' | 'large'
   block?: boolean
diff --git a/src/components/button/demos/demo1.tsx b/src/components/button/demos/demo1.tsx
index 22094efa17..b941e2f725 100644
--- a/src/components/button/demos/demo1.tsx
+++ b/src/components/button/demos/demo1.tsx
@@ -1,6 +1,6 @@
-import React from 'react'
 import { Button, Space } from 'antd-mobile'
 import { DemoBlock } from 'demos'
+import React from 'react'
 
 export default () => {
   return (
@@ -55,6 +55,7 @@ export default () => {
           <Button color='success'>Success</Button>
           <Button color='danger'>Danger</Button>
           <Button color='warning'>Warning</Button>
+          <Button color='link'>Link</Button>
         </Space>
       </DemoBlock>
     </>
diff --git a/src/components/button/tests/button.test.tsx b/src/components/button/tests/button.test.tsx
index b847a61b73..f83b76f2d2 100644
--- a/src/components/button/tests/button.test.tsx
+++ b/src/components/button/tests/button.test.tsx
@@ -1,15 +1,15 @@
 import React, { createRef } from 'react'
 import {
+  act,
+  fireEvent,
   render,
-  testA11y,
   screen,
-  fireEvent,
   sleep,
+  testA11y,
   waitFor,
-  act,
 } from 'testing'
-import Button from '../'
 import type { ButtonRef } from '..'
+import Button from '../'
 
 const classPrefix = `adm-button`
 
@@ -25,6 +25,7 @@ describe('Button', () => {
         <Button color='success'>Success</Button>
         <Button color='danger'>Danger</Button>
         <Button color='warning'>Warning</Button>
+        <Button color='link'>Link</Button>
       </>
     )
     expect(getByText('Primary').closest('button')).toHaveClass(
@@ -39,6 +40,9 @@ describe('Button', () => {
     expect(getByText('Warning').closest('button')).toHaveClass(
       `${classPrefix}-warning`
     )
+    expect(getByText('Link').closest('button')).toHaveClass(
+      `${classPrefix}-link`
+    )
   })
 
   test('renders with fill', () => {
diff --git a/src/global/theme-dark.less b/src/global/theme-dark.less
index 59f27b3fb3..316cb6c591 100644
--- a/src/global/theme-dark.less
+++ b/src/global/theme-dark.less
@@ -4,6 +4,7 @@ html[data-prefers-color-scheme='dark'] {
   --adm-color-success: #34b368;
   --adm-color-warning: #ffa930;
   --adm-color-danger: #ff4a58;
+  --adm-color-link: #3086ff;
 
   --adm-color-yellow: #ffa930;
   --adm-color-orange: #e65a2b;
diff --git a/src/global/theme-default.less b/src/global/theme-default.less
index 23e8c83b54..9a39b5162a 100644
--- a/src/global/theme-default.less
+++ b/src/global/theme-default.less
@@ -20,27 +20,28 @@
   --adm-color-success: #00b578;
   --adm-color-warning: #ff8f1f;
   --adm-color-danger: #ff3141;
+  --adm-color-link: #3086ff;
 
   --adm-color-yellow: #ff9f18;
   --adm-color-orange: #ff6430;
   --adm-color-wathet: #e7f1ff;
 
-  --adm-color-text: #333333;
-  --adm-color-text-secondary: #666666;
-  --adm-color-weak: #999999;
-  --adm-color-light: #cccccc;
-  --adm-color-border: #eeeeee;
-  --adm-color-background: #ffffff;
+  --adm-color-text: #333;
+  --adm-color-text-secondary: #666;
+  --adm-color-weak: #999;
+  --adm-color-light: #ccc;
+  --adm-color-border: #eee;
+  --adm-color-background: #fff;
 
   --adm-color-highlight: var(--adm-color-danger);
 
   // Deprecated. We use `--adm-color-text-light-solid` in code
   // but keep here for compatible
-  --adm-color-white: #ffffff;
+  --adm-color-white: #fff;
   --adm-color-box: #f5f5f5;
 
   --adm-color-text-light-solid: var(--adm-color-white);
-  --adm-color-text-dark-solid: #000000;
+  --adm-color-text-dark-solid: #000;
   --adm-color-fill-content: var(--adm-color-box);
 
   --adm-font-size-main: var(--adm-font-size-5);