diff --git a/packages/design/src/alert/demo/action.tsx b/packages/design/src/alert/demo/action.tsx
index 90820d4b9..5e72c4edb 100644
--- a/packages/design/src/alert/demo/action.tsx
+++ b/packages/design/src/alert/demo/action.tsx
@@ -12,39 +12,31 @@ const App: React.FC = () => (
       description="Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Informational Notes"
       description="Additional description and information about copywriting."
       type="info"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Warning"
       description="This is a warning notice about copywriting."
       type="warning"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Error"
       description="This is an error message about copywriting."
       type="error"
       showIcon
+      closable
       action={
         <Button size="small" danger>
           Detail
diff --git a/packages/design/src/alert/demo/over-length.tsx b/packages/design/src/alert/demo/over-length.tsx
index 9dbcc53fc..8e502c835 100644
--- a/packages/design/src/alert/demo/over-length.tsx
+++ b/packages/design/src/alert/demo/over-length.tsx
@@ -18,13 +18,13 @@ const App: React.FC = () => (
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       type="success"
       showIcon
-      closable
-      closeIcon={<span>Close</span>}
+      action={<a>Detail</a>}
     />
     <Alert
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       type="success"
       showIcon
+      closable
       action={<a>Detail</a>}
     />
     <Alert
@@ -32,19 +32,15 @@ const App: React.FC = () => (
       description="Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      closable
-      onClose={onClose}
+      action={<Button size="small">Detail</Button>}
     />
     <Alert
       message="Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips. Success Tips."
       description="Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting. Detailed description and advice about successful copywriting."
       type="success"
       showIcon
-      action={
-        <Button type="primary" size="small">
-          Detail
-        </Button>
-      }
+      closable
+      action={<Button size="small">Detail</Button>}
     />
   </Space>
 );
diff --git a/packages/design/src/alert/style/index.ts b/packages/design/src/alert/style/index.ts
index d88377560..3ba78d832 100644
--- a/packages/design/src/alert/style/index.ts
+++ b/packages/design/src/alert/style/index.ts
@@ -69,6 +69,7 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
     [`${componentCls}`]: {
       // vertical align to flex-start
       alignItems: 'flex-start !important',
+      paddingRight: token.padding,
       [`${componentCls}-icon`]: {
         height,
       },
@@ -81,14 +82,25 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
         },
       },
     },
+    [`${componentCls}:not(${componentCls}-with-description)`]: {
+      paddingLeft: token.padding,
+    },
     [`${componentCls}${componentCls}-with-description`]: {
       paddingBlock: token.padding,
       [`${componentCls}-message`]: {
+        fontWeight: 500,
         marginBottom: token.marginXXS,
       },
+      [`${componentCls}-description`]: {
+        color: token.colorTextSecondary,
+      },
       [`${componentCls}-icon`]: {
         fontSize: token.fontSizeHeading4,
         height: token.fontSizeHeading3,
+        marginInlineEnd: token.margin,
+      },
+      [`${componentCls}-action`]: {
+        marginInlineStart: token.marginXS,
       },
     },
     [`${componentCls}:not(${componentCls}-banner):not(${componentCls}-ghost)`]: {