diff --git a/packages/components/src/components/tag/Tag.tsx b/packages/components/src/components/tag/Tag.tsx
index 4848cca12c..3225777d13 100644
--- a/packages/components/src/components/tag/Tag.tsx
+++ b/packages/components/src/components/tag/Tag.tsx
@@ -1,37 +1,16 @@
 import React, { useContext } from 'react';
-import { TagProps, TagTypeKey, TagColor, TagStatusKey, TagStatus } from './interface';
+import { TagProps } from './interface';
 import { ConfigContext } from '../config-provider';
 import { Close } from '@gio-design/icons';
 import classnames from 'classnames';
 
-export const isProrupt = (type?: TagTypeKey, closable = false) => type === 'prorupt' || closable;
-
-export const isLarge = (type?: TagTypeKey) => type === 'large';
-
-export const isPredifinedColor = (color?: string) => Object.keys(TagColor).includes(color || '');
-
-export const isPredifinedStatus = (type?: string) => Object.keys(TagStatus).includes(type || '');
-
 export const isToggleClose = (closable = false, persistCloseIcon = false) => closable && !persistCloseIcon;
 
-export const getTypeClass = (prefix = 'tag', type?: TagTypeKey, closable = false) =>
-  classnames({ [`${prefix}-prorupt`]: isProrupt(type, closable), [`${prefix}-large`]: isLarge(type) });
-
-export const getStatusClass = (prefix = 'tag', status?: TagStatusKey) =>
-  classnames({ [`${prefix}-status-${status}`]: isPredifinedStatus(status) });
-
-export const getColorClass = (prefix = 'tag', color?: string) =>
-  classnames({ [`${prefix}-color-${color}`]: isPredifinedColor(color) });
-
-export const getDeleteToggleClass = (prefix = 'tag', isToggleClose = false) =>
-  classnames({ [`${prefix}-delete-toggle`]: isToggleClose });
-
-export const getDisabledClass = (prefix = 'tag', disabled = false) => classnames({ [`${prefix}-disabled`]: disabled });
-
 const Tag: React.FC<TagProps & React.HTMLAttributes<HTMLSpanElement>> = (props) => {
   const {
     children,
-    type,
+    type = 'normal',
+    size = 'medium',
     status,
     color,
     closable,
@@ -49,17 +28,19 @@ const Tag: React.FC<TagProps & React.HTMLAttributes<HTMLSpanElement>> = (props)
     <span
       className={classnames(
         prefix,
-        getTypeClass(prefix, type, closable),
-        getStatusClass(prefix, status),
-        getColorClass(prefix, color),
-        getDeleteToggleClass(prefix, isToggleClose(closable, persistCloseIcon)),
-        getDisabledClass(prefix, disabled),
+        classnames({ [`${prefix}-size-${size}`]: size }),
+        classnames({ [`${prefix}-type-${type}`]: type }),
+        classnames({ [`${prefix}-status-${status}`]: status }),
+        classnames({ [`${prefix}-color-${color}`]: color }),
+        classnames({ [`${prefix}-closable`]: closable }),
+        classnames({ [`${prefix}-closable-toggle`]: isToggleClose(closable, persistCloseIcon) }),
+        classnames({ [`${prefix}-closable-disabled`]: disabled }),
         className
       )}
       {...restProps}
     >
       {children}
-      {closable && !disabled ? <Close className={`${prefix}-close`} onClick={onClose} /> : null}
+      {closable && !disabled ? <Close className={`${prefix}-closable-icon`} onClick={onClose} /> : null}
     </span>
   );
 };
diff --git a/packages/components/src/components/tag/__tests__/Tag.test.js b/packages/components/src/components/tag/__tests__/Tag.test.js
index 364a99e196..666cd736e0 100644
--- a/packages/components/src/components/tag/__tests__/Tag.test.js
+++ b/packages/components/src/components/tag/__tests__/Tag.test.js
@@ -32,11 +32,11 @@ describe('<Tag />', () => {
     expect(tree.hasClass('test-custom-tag')).toBe(true);
   });
 
-  it('should have "gio-delete-toggle', () => {
+  it('should have "gio-tag-closable-toggle', () => {
     const tree = shallow(<Tag closable={true} persistCloseIcon={false} />);
     tree.simulate('hover');
-    expect(tree.hasClass('gio-tag-delete-toggle')).toBe(true);
-    expect(tree.exists('.gio-tag-close')).toBe(true);
+    expect(tree.hasClass('gio-tag-closable-toggle')).toBe(true);
+    expect(tree.exists('.gio-tag-closable-icon')).toBe(true);
   });
 
   it('should onClose call back', () => {
@@ -44,28 +44,11 @@ describe('<Tag />', () => {
       expect(true).toBe(true);
     };
     const tree = shallow(<Tag closable={true} persistCloseIcon={true} onClose={onClose} />);
-    tree.find('.gio-tag-close').simulate('click');
+    tree.find('.gio-tag-closable-icon').simulate('click');
   });
 });
 
 describe('Tag condition functions', () => {
-  it('isProrupt', () => {
-    expect(isProrupt('prorupt', false)).toBe(true);
-    expect(isProrupt('normal', true)).toBe(true);
-  });
-  it('isLarge', () => {
-    expect(isLarge('large')).toBe(true);
-  });
-  it('isPredifinedColor', () => {
-    expect(isPredifinedColor('beta')).toBe(true);
-    expect(isPredifinedColor('new')).toBe(true);
-    expect(isPredifinedColor('asdljalksdj')).toBe(false);
-  });
-  it('isPredifinedStatus', () => {
-    expect(isPredifinedStatus('success')).toBe(true);
-    expect(isPredifinedStatus('warning')).toBe(true);
-    expect(isPredifinedStatus('asdljalksdj')).toBe(false);
-  });
   it('isPersistClose', () => {
     expect(isToggleClose(true, true)).toBe(false);
     expect(isToggleClose(true, false)).toBe(true);
@@ -73,25 +56,3 @@ describe('Tag condition functions', () => {
     expect(isToggleClose(false, false)).toBe(false);
   });
 });
-
-describe('Tag conditional classes functions', () => {
-  const prefix = 'gio-tag';
-  it('getTypeClass', () => {
-    expect(getTypeClass(prefix, 'normal')).toBe('');
-    expect(getTypeClass(prefix, 'prorupt', true)).toBe('gio-tag-prorupt');
-    expect(getTypeClass(prefix, 'large', true)).toBe('gio-tag-prorupt gio-tag-large');
-  });
-  it('getStatusClass', () => {
-    expect(getStatusClass(prefix, 'success')).toBe('gio-tag-status-success');
-  });
-  it('getColorClass', () => {
-    expect(getColorClass(prefix, 'beta')).toBe('gio-tag-color-beta');
-  });
-  it('getDeleteToggleClass', () => {
-    expect(getDeleteToggleClass(prefix, true)).toBe('gio-tag-delete-toggle');
-    expect(getDeleteToggleClass(prefix, false)).toBe('');
-  });
-  it('getDisabledClass', () => {
-    expect(getDisabledClass(prefix, true)).toBe('gio-tag-disabled');
-  });
-});
diff --git a/packages/components/src/components/tag/__tests__/__snapshots__/Tag.test.js.snap b/packages/components/src/components/tag/__tests__/__snapshots__/Tag.test.js.snap
index 6555787c7d..06949cb00d 100644
--- a/packages/components/src/components/tag/__tests__/__snapshots__/Tag.test.js.snap
+++ b/packages/components/src/components/tag/__tests__/__snapshots__/Tag.test.js.snap
@@ -2,6 +2,6 @@
 
 exports[`<Tag /> renders <Tag /> components 1`] = `
 <span
-  className="gio-tag"
+  className="gio-tag gio-tag-size-medium gio-tag-type-normal"
 />
 `;
diff --git a/packages/components/src/components/tag/interface.ts b/packages/components/src/components/tag/interface.ts
index b2e22e6c3c..660da38fb5 100644
--- a/packages/components/src/components/tag/interface.ts
+++ b/packages/components/src/components/tag/interface.ts
@@ -1,34 +1,8 @@
-export enum TagType {
-  'normal',
-  'prorupt',
-  'large',
-}
-
-export enum TagStatus {
-  'success',
-  'warning',
-  'error',
-  'offline',
-  'draft',
-}
-
-export enum TagColor {
-  'beta',
-  'new',
-  'grayscale',
-  'blue',
-}
-
-export type TagTypeKey = keyof typeof TagType;
-
-export type TagStatusKey = keyof typeof TagStatus;
-
-export type TagColorKey = keyof typeof TagColor;
-
 export interface TagProps {
-  type?: TagTypeKey;
-  status?: TagStatusKey;
-  color?: TagColorKey | string;
+  type?: 'normal' | 'prorupt';
+  status?: 'success' | 'warning' | 'error' | 'offline' | 'draft';
+  size?: 'small' | 'medium' | 'large';
+  color?: 'beta' | 'new' | 'grayscale' | 'blue';
   closable?: boolean;
   disabled?: boolean;
   persistCloseIcon?: boolean;
diff --git a/packages/components/src/components/tag/style/index.less b/packages/components/src/components/tag/style/index.less
index c9bfcac1ea..9d297c9b36 100644
--- a/packages/components/src/components/tag/style/index.less
+++ b/packages/components/src/components/tag/style/index.less
@@ -1,135 +1,132 @@
-@import '../../../stylesheet/font.less';
-@import '../../../stylesheet/fontSize.less';
-@import '../../../stylesheet//radius.less';
 @import '../../../stylesheet/theme.less';
-@import '../../../stylesheet/textColor.less';
 @import '~@gio-design/tokens/dist/variables.less';
 
 @tag-prefix-cls: ~'@{component-prefix}-tag';
-@tag-padding: 8px;
+@tag-padding: @size-spacing-xs;
 
-@tag-font-size: @default-font-size-2;
-@tag-line-height: 20px;
-
-@tag-font-size-prorupt: @default-font-size-3;
-@tag-line-height-prorupt: 24px;
-
-@tag-font-size-large: @default-font-size-3;
-@tag-line-height-large: 32px;
-
-.@{tag-prefix-cls}{
+.@{tag-prefix-cls} {
   display: inline-block;
-  color: @color-text-tag-sign-regular;
-  background-color: @color-background-tag-sign;
-  border-radius: @border-radius-medium;
-  padding-left: @tag-padding;
   padding-right: @tag-padding;
-  font-size: @tag-font-size;
-  line-height: @tag-line-height;
+  padding-left: @tag-padding;
+  color: @color-text-tag-sign-normal;
   font-family: @font-family;
-  font-weight: @weight-font-medium;
+  background-color: @color-background-tag-sign;
+  border-radius: @radius-border-small;
   cursor: default;
 
-  &-status {
-    &-success {
-      color: @color-text-tag-sign-inline;
-    }
-    &-warning {
-      color: @color-text-tag-sign-ready;
-    }
-    &-error {
-      color: @color-background-tag-status-error;
-    }
-    &-draft {
-      color:@color-text-tag-sign-draft;
+  &-size {
+    &-small {
+      font-weight: @weight-font-medium;
+      font-size: @size-font-12;
+      line-height: 20px;
     }
-    &-offline {
-      color: @color-text-tag-sign-offline;
+
+    &-medium {
+      font-weight: @weight-font-regular;
+      font-size: @size-font-14;
+      line-height: 24px;
     }
-  }
 
-  &-prorupt {
-    font-size: @tag-font-size-prorupt;
-    line-height: @tag-line-height-prorupt;
-    font-weight: @weight-font-regular;
+    &-large {
+      font-weight: @weight-font-regular;
+      font-size: @size-font-14;
+      line-height: 32px;
+    }
   }
 
-  &-prorupt&-status {
+  &-status {
     &-success {
-      color: @default-color-text-inverse;
+      color: @color-text-tag-sign-inline;
+    }
+    &-success.@{tag-prefix-cls}-type-prorupt {
       background-color: @color-background-tag-status-success;
     }
     &-warning {
-      color: @default-color-text-inverse;
+      color: @color-text-tag-sign-processing;
+    }
+    &-warning.@{tag-prefix-cls}-type-prorupt {
       background-color: @color-background-tag-status-warning;
     }
     &-error {
-      color: @default-color-text-inverse;
+      color: @color-background-tag-status-error;
+    }
+    &-error.@{tag-prefix-cls}-type-prorupt {
       background-color: @color-background-tag-status-error;
     }
     &-draft {
-      color: @default-color-text-inverse;
-      background-color: @color-text-tag-sign-draft;
+      color: @color-text-tag-sign-draft;
     }
     &-offline {
-      color: @default-color-text-inverse;
-      background-color: @color-text-tag-sign-offline;
+      color: @color-text-tag-sign-offline;
     }
   }
 
-  &-large {
-    font-size: @tag-font-size-large;
-    line-height: @tag-line-height-large;
+  &-type {
+    &-prorupt {
+      color: @color-text-tag-status-button;
+    }
   }
 
   &-color {
     &-beta {
       color: @color-text-tag-version-beta;
       background-color: @color-background-tag-version-beta;
-      font-weight: @weight-font-medium;
     }
     &-new {
       color: @color-text-tag-version-new;
       background-color: @color-background-tag-version-new;
-      font-weight: @weight-font-medium;
     }
     &-grayscale {
       color: @color-text-tag-version-grayscale;
       background-color: @color-background-tag-version-grayscale;
-      font-weight: @weight-font-medium;
     }
     &-blue {
-      color: @color-text-tag-filter-blue;
-      background-color: @color-background-tag-filter-blue;
-      font-weight: @weight-font-medium;
+      color: @color-background-tag-filter-dark-normal;
+      background-color: @color-background-tag-filter-dark-normal;
     }
   }
 
-  &-delete-toggle & {
-    &-close {
-      display: none;
+  &-closable {
+    background-color: @color-background-tag-filter-light-normal;
+    &:hover {
+      background-color: @color-background-tag-filter-light-hover;
+    }
+    &:focus {
+      background-color: @color-background-tag-filter-light-click;
     }
-  }
 
-  &-delete-toggle:hover {
-    background-color: @color-background-tag-filter-hover;
-  }
+    &.@{tag-prefix-cls}-type-prorupt {
+      background-color: @color-background-tag-filter-dark-normal;
+      &:hover {
+        background-color: @color-background-tag-filter-dark-hover;
+      }
+      &:focus {
+        background-color: @color-background-tag-filter-dark-click;
+      }
+    }
 
-  &-delete-toggle:hover & {
-    &-close {
-      display: inline;
+    &-icon {
+      margin-bottom: 2px;
+      margin-left: @tag-padding;
+      vertical-align: middle;
+      cursor: pointer;
     }
-  }
 
-  &-close {
-    vertical-align: middle;
-    margin-left: @tag-padding;
-    margin-bottom: 2px;
-    cursor: pointer;
-  }
+    &-toggle & {
+      &-icon {
+        display: none;
+      }
+    }
 
-  &-disabled {
-    color: @color-text-tag-filter-disable!important;
-    background-color: @color-background-tag-filter-disable!important;
+    &-toggle:hover & {
+      &-icon {
+        display: inline;
+      }
+    }
+
+    &-disabled {
+      color: @color-text-tag-filter-disable-l !important;
+      background-color: @color-background-tag-filter-dark-disable !important;
+    }
   }
 }
diff --git a/packages/tokens/properties/color/background.json b/packages/tokens/properties/color/background.json
index 9b3eef9e58..74cd6bb241 100644
--- a/packages/tokens/properties/color/background.json
+++ b/packages/tokens/properties/color/background.json
@@ -87,33 +87,46 @@
         },
         "status": {
           "success": {
-            "value": "{palette.green.2.value}"
+            "value": "{palette.green.5.value}"
           },
           "warning": {
-            "value": "{palette.orange.3.value}"
+            "value": "{palette.yellow.5.value}"
           },
           "error": {
-            "value": "{palette.red.3.value}"
+            "value": "{palette.red.5.value}"
           },
           "disable": {
             "value": "{palette.gray.5.value}"
           }
         },
         "filter": {
-          "normal": {
-            "value": "{palette.gray.1.value}"
-          },
-          "hover": {
-            "value": "{palette.gray.3.value}"
-          },
-          "click": {
-            "value": "#F1F2F8"
-          },
-          "disable": {
-            "value": "#F7F8FB"
+          "light": {
+            "normal": {
+              "value": "{palette.gray.1.value}"
+            },
+            "hover": {
+              "value": "{palette.gray.3.value}"
+            },
+            "click": {
+              "value": "{palette.gray.2.value}"
+            },
+            "disable": {
+              "value": "{palette.gray.1.value}"
+            }
           },
-          "blue": {
-            "value": "{palette.blue.7.value}"
+          "dark": {
+            "normal": {
+              "value": "{palette.blue.4.value}"
+            },
+            "hover": {
+              "value": "{palette.blue.5.value}"
+            },
+            "click": {
+              "value": "{palette.blue.3.value}"
+            },
+            "disable": {
+              "value": "{palette.gray.1.value}"
+            }
           }
         },
         "version": {
@@ -121,10 +134,10 @@
             "value": "{palette.blue.1.value}"
           },
           "new": {
-            "value": "{palette.red.2.value}"
+            "value": "{palette.red.1.value}"
           },
           "grayscale": {
-            "value": "{palette.purple.1.value}"
+            "value": "{palette.gray.1.value}"
           }
         }
       },
@@ -304,4 +317,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/tokens/properties/color/text.json b/packages/tokens/properties/color/text.json
index 1a26cb4ab6..9716cbe3af 100644
--- a/packages/tokens/properties/color/text.json
+++ b/packages/tokens/properties/color/text.json
@@ -98,44 +98,57 @@
       },
       "tag": {
         "sign": {
-          "regular": {
+          "normal": {
             "value": "{palette.black.6.value}"
           },
           "inline": {
-            "value": "{palette.green.3.value}"
+            "value": "{palette.green.5.value}"
           },
-          "ready": {
-            "value": "{palette.orange.2.value}"
+          "processing": {
+            "value": "{palette.yellow.5.value}"
           },
           "offline": {
-            "value": "{palette.gray.7.value}"
+            "value": "{palette.black.4.value}"
           },
           "draft": {
-            "value": "{palette.gray.6.value}"
+            "value": "{palette.black.3.value}"
           }
         },
         "status": {
           "button": {
             "value": "{palette.white.value}"
           },
-          "table": {
-            "normal": {
-              "value": "{palette.black.6.value}"
-            },
-            "disable": {
-              "value": "{palette.gray.5.value}"
-            }
+          "dot": {
+            "value": "{palette.black.6.value}"
+          },
+          "disable": {
+            "value": "{palette.black.2.value}"
           }
         },
         "filter": {
           "light": {
-            "value": "{palette.black.6.value}"
+            "l": {
+              "value": "{palette.black.6.value}"
+            },
+            "s": {
+              "value": "{palette.black.6.value}"
+            }
           },
-          "blue": {
-            "value": "{palette.white.value}"
+          "dark": {
+            "l": {
+              "value": "{palette.white.value}"
+            },
+            "s": {
+              "value": "{palette.white.value}"
+            }
           },
           "disable": {
-            "value": "{palette.gray.5.value}"
+            "l": {
+              "value": "{palette.black.2.value}"
+            },
+            "s": {
+              "value": "{palette.black.2.value}"
+            }
           }
         },
         "version": {
@@ -146,7 +159,7 @@
             "value": "{palette.red.3.value}"
           },
           "grayscale": {
-            "value": "{palette.purple.2.value}"
+            "value": "{palette.black.5.value}"
           }
         }
       },
@@ -290,4 +303,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/website/src/components/basic/tag/demos/basic.tsx b/packages/website/src/components/basic/tag/demos/basic.tsx
index 72efa9fd06..b325fe3396 100644
--- a/packages/website/src/components/basic/tag/demos/basic.tsx
+++ b/packages/website/src/components/basic/tag/demos/basic.tsx
@@ -5,17 +5,19 @@ import './index.less';
 
 const Basics = () => (
   <>
-    <Tag className="tag_website_demo_tag">超管</Tag>
-    <Tag className="tag_website_demo_tag" status="success">
+    <Tag className="tag_website_demo_tag" size="small">
+      超管
+    </Tag>
+    <Tag className="tag_website_demo_tag" status="success" size="small">
       已上线
     </Tag>
-    <Tag className="tag_website_demo_tag" status="warning">
+    <Tag className="tag_website_demo_tag" status="warning" size="small">
       待上线
     </Tag>
-    <Tag className="tag_website_demo_tag" status="draft">
+    <Tag className="tag_website_demo_tag" status="draft" size="small">
       草稿
     </Tag>
-    <Tag className="tag_website_demo_tag" status="offline">
+    <Tag className="tag_website_demo_tag" status="offline" size="small">
       已结束
     </Tag>
   </>
diff --git a/packages/website/src/components/basic/tag/demos/closable.tsx b/packages/website/src/components/basic/tag/demos/closable.tsx
index 11bb47dc87..da89e1f8da 100644
--- a/packages/website/src/components/basic/tag/demos/closable.tsx
+++ b/packages/website/src/components/basic/tag/demos/closable.tsx
@@ -3,17 +3,15 @@ import { Tag } from '@gio-design/components';
 import '@gio-design/components/es/components/tag/style/index.css';
 import './index.less';
 
-const onClose = (e: any) => console.log('you have clicked tag');
-
 const Closable = () => (
   <>
-    <Tag className="tag_website_demo_tag" closable={true} persistCloseIcon={true} onClose={onClose}>
+    <Tag className="tag_website_demo_tag" closable={true}>
       控件内的过滤条件
     </Tag>
-    <Tag className="tag_website_demo_tag" color="blue" closable={true} persistCloseIcon={true} onClose={onClose}>
+    <Tag className="tag_website_demo_tag" type="prorupt" closable={true} persistCloseIcon={true}>
       控件内的过滤条件
     </Tag>
-    <Tag className="tag_website_demo_tag" type="large" closable={true} persistCloseIcon={true} onClose={onClose}>
+    <Tag className="tag_website_demo_tag" size="large" closable={true}>
       控件内的过滤条件
     </Tag>
   </>
diff --git a/packages/website/src/components/basic/tag/demos/hoverClose.tsx b/packages/website/src/components/basic/tag/demos/hoverClose.tsx
index c559635f6d..e31ddd364a 100644
--- a/packages/website/src/components/basic/tag/demos/hoverClose.tsx
+++ b/packages/website/src/components/basic/tag/demos/hoverClose.tsx
@@ -7,7 +7,7 @@ const onClose = (e: any) => console.log('you have clicked tag');
 
 const HoverClose = () => (
   <>
-    <Tag className="tag_website_demo_tag" closable={true} persistCloseIcon={false} onClose={onClose}>
+    <Tag className="tag_website_demo_tag" closable={true} persistCloseIcon={false}>
       可删除的标签
     </Tag>
     <Tag className="tag_website_demo_tag" closable={true} disabled>
diff --git a/packages/website/src/components/basic/tag/demos/version.tsx b/packages/website/src/components/basic/tag/demos/version.tsx
index daac988700..5b270c506b 100644
--- a/packages/website/src/components/basic/tag/demos/version.tsx
+++ b/packages/website/src/components/basic/tag/demos/version.tsx
@@ -5,13 +5,13 @@ import './index.less';
 
 const Basics = () => (
   <>
-    <Tag className="tag_website_demo_tag" color="beta">
+    <Tag className="tag_website_demo_tag" color="beta" size="small">
       Beta
     </Tag>
-    <Tag className="tag_website_demo_tag" color="new">
+    <Tag className="tag_website_demo_tag" color="new" size="small">
       New
     </Tag>
-    <Tag className="tag_website_demo_tag" color="grayscale">
+    <Tag className="tag_website_demo_tag" color="grayscale" size="small">
       灰度
     </Tag>
   </>
diff --git a/packages/website/src/components/basic/tag/index.zh-CN.md b/packages/website/src/components/basic/tag/index.zh-CN.md
index b722e714f7..de20ae7083 100644
--- a/packages/website/src/components/basic/tag/index.zh-CN.md
+++ b/packages/website/src/components/basic/tag/index.zh-CN.md
@@ -25,12 +25,13 @@ group:
 
 ### Checkbox
 
-| 参数             | 说明                      | 类型                                                             | 默认值   |
-| ---------------- | ------------------------- | ---------------------------------------------------------------- | -------- |
-| type             | 类型                      | `TagType` : `normal`, `prorupt`, `large`                         | `normal` |
-| status           | 状态                      | `TagStatus` : `success`, `warning`, `error`， `offline`, `draft` | -        |
-| color            | 预定义的颜色搭配          | `TagColor` : `beta`, `new`, `grayscale`, `blue`                  | -        |
-| disabled         | 失效                      | `boolean`                                                        | false    |
-| closable         | 显示可关闭图标            | `boolean`                                                        | false    |
-| persistCloseIcon | 关闭图标是否由 hover 触发 | `boolean`                                                        | true     |
-| onClose          | 点击关闭图标的回调        | `(event) => void`                                                | -        |
+| 参数             | 说明                      | 类型                                                          | 默认值   |
+| ---------------- | ------------------------- | ------------------------------------------------------------- | -------- |
+| type             | 类型                      | `string` : `normal`, `prorupt`                                | `normal` |
+| size             | 大小                      | `string` : `small`, `medium`, `large`                         | `large`  |
+| status           | 状态                      | `string` : `success`, `warning`, `error`， `offline`, `draft` | -        |
+| color            | 预定义的颜色搭配          | `string` : `beta`, `new`, `grayscale`                         | -        |
+| disabled         | 失效                      | `boolean`                                                     | false    |
+| closable         | 显示可关闭图标            | `boolean`                                                     | false    |
+| persistCloseIcon | 关闭图标是否由 hover 触发 | `boolean`                                                     | true     |
+| onClose          | 点击关闭图标的回调        | `(event) => void`                                             | -        |