From f829e401109b37b304a4aef3d49ccb96bd652160 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Tue, 21 Mar 2023 13:02:27 +0800
Subject: [PATCH] feat: Tag support borderless (#41305)

* feat: Tag support borderless

* update demo

* update colorFillSecondary

* update color

* fix

* update demo size
---
 components/tag/CheckableTag.tsx               |  17 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 420 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.ts.snap | 420 ++++++++++++++++++
 components/tag/demo/basic.tsx                 |   2 +-
 components/tag/demo/borderless.md             |   7 +
 components/tag/demo/borderless.tsx            |  55 +++
 components/tag/demo/borderlessLayout.md       |   7 +
 components/tag/demo/borderlessLayout.tsx      |  58 +++
 components/tag/index.en-US.md                 |   3 +
 components/tag/index.tsx                      |  27 +-
 components/tag/index.zh-CN.md                 |   3 +
 components/tag/style/index.ts                 |  16 +-
 12 files changed, 1010 insertions(+), 25 deletions(-)
 create mode 100644 components/tag/demo/borderless.md
 create mode 100644 components/tag/demo/borderless.tsx
 create mode 100644 components/tag/demo/borderlessLayout.md
 create mode 100644 components/tag/demo/borderlessLayout.tsx

diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index 516074ec4d..b806786c65 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -18,14 +18,15 @@ export interface CheckableTagProps {
   onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
 }
 
-const CheckableTag: React.FC<CheckableTagProps> = ({
-  prefixCls: customizePrefixCls,
-  className,
-  checked,
-  onChange,
-  onClick,
-  ...restProps
-}) => {
+const CheckableTag: React.FC<CheckableTagProps> = (props) => {
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    checked,
+    onChange,
+    onClick,
+    ...restProps
+  } = props;
   const { getPrefixCls } = React.useContext(ConfigContext);
 
   const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
index d0ba406dc0..677ef14d73 100644
--- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -221,6 +221,426 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/tag/demo/borderless.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -8px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 1
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 2
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 3
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 4
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -8px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-magenta ant-tag-borderless"
+      >
+        magenta
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-red ant-tag-borderless"
+      >
+        red
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-volcano ant-tag-borderless"
+      >
+        volcano
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-orange ant-tag-borderless"
+      >
+        orange
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-gold ant-tag-borderless"
+      >
+        gold
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-lime ant-tag-borderless"
+      >
+        lime
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-green ant-tag-borderless"
+      >
+        green
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-cyan ant-tag-borderless"
+      >
+        cyan
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-blue ant-tag-borderless"
+      >
+        blue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-geekblue ant-tag-borderless"
+      >
+        geekblue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-purple ant-tag-borderless"
+      >
+        purple
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/tag/demo/borderlessLayout.tsx extend context correctly 1`] = `
+<div
+  style="background-color: rgb(245, 245, 245); padding: 16px;"
+>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -8px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 1
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 2
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 3
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 4
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -8px;"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-magenta ant-tag-borderless"
+      >
+        magenta
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-red ant-tag-borderless"
+      >
+        red
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-volcano ant-tag-borderless"
+      >
+        volcano
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-orange ant-tag-borderless"
+      >
+        orange
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-gold ant-tag-borderless"
+      >
+        gold
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-lime ant-tag-borderless"
+      >
+        lime
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-green ant-tag-borderless"
+      >
+        green
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-cyan ant-tag-borderless"
+      >
+        cyan
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-blue ant-tag-borderless"
+      >
+        blue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 8px; padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-geekblue ant-tag-borderless"
+      >
+        geekblue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 8px;"
+    >
+      <span
+        class="ant-tag ant-tag-purple ant-tag-borderless"
+      >
+        purple
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/tag/demo/checkable.tsx extend context correctly 1`] = `
 Array [
   <span
diff --git a/components/tag/__tests__/__snapshots__/demo.test.ts.snap b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
index 385cc958d1..e949d6066e 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.ts.snap
@@ -221,6 +221,426 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/tag/demo/borderless.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-8px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 1
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 2
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 3
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 4
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-8px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-magenta ant-tag-borderless"
+      >
+        magenta
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-red ant-tag-borderless"
+      >
+        red
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-volcano ant-tag-borderless"
+      >
+        volcano
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-orange ant-tag-borderless"
+      >
+        orange
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-gold ant-tag-borderless"
+      >
+        gold
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-lime ant-tag-borderless"
+      >
+        lime
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-green ant-tag-borderless"
+      >
+        green
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-cyan ant-tag-borderless"
+      >
+        cyan
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-blue ant-tag-borderless"
+      >
+        blue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-geekblue ant-tag-borderless"
+      >
+        geekblue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-purple ant-tag-borderless"
+      >
+        purple
+      </span>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
+<div
+  style="background-color:#f5f5f5;padding:16px"
+>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-8px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 1
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 2
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 3
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-borderless"
+      >
+        Tag 4
+        <span
+          aria-label="close"
+          class="anticon anticon-close ant-tag-close-icon"
+          role="img"
+          tabindex="-1"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-8px"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-magenta ant-tag-borderless"
+      >
+        magenta
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-red ant-tag-borderless"
+      >
+        red
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-volcano ant-tag-borderless"
+      >
+        volcano
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-orange ant-tag-borderless"
+      >
+        orange
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-gold ant-tag-borderless"
+      >
+        gold
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-lime ant-tag-borderless"
+      >
+        lime
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-green ant-tag-borderless"
+      >
+        green
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-cyan ant-tag-borderless"
+      >
+        cyan
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-blue ant-tag-borderless"
+      >
+        blue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:8px;padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-geekblue ant-tag-borderless"
+      >
+        geekblue
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:8px"
+    >
+      <span
+        class="ant-tag ant-tag-purple ant-tag-borderless"
+      >
+        purple
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/tag/demo/checkable.tsx correctly 1`] = `
 Array [
   <span
diff --git a/components/tag/demo/basic.tsx b/components/tag/demo/basic.tsx
index fb62cd0705..24e888218f 100644
--- a/components/tag/demo/basic.tsx
+++ b/components/tag/demo/basic.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Space, Tag } from 'antd';
+import React from 'react';
 
 const log = (e: React.MouseEvent<HTMLElement>) => {
   console.log(e);
diff --git a/components/tag/demo/borderless.md b/components/tag/demo/borderless.md
new file mode 100644
index 0000000000..f35c18da5d
--- /dev/null
+++ b/components/tag/demo/borderless.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+无边框模式。
+
+## en-US
+
+borderless.
diff --git a/components/tag/demo/borderless.tsx b/components/tag/demo/borderless.tsx
new file mode 100644
index 0000000000..2ae071fce3
--- /dev/null
+++ b/components/tag/demo/borderless.tsx
@@ -0,0 +1,55 @@
+import { Divider, Space, Tag } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <>
+    <Space size="small" wrap>
+      <Tag bordered={false}>Tag 1</Tag>
+      <Tag bordered={false}>Tag 2</Tag>
+      <Tag bordered={false} closable>
+        Tag 3
+      </Tag>
+      <Tag bordered={false} closable>
+        Tag 4
+      </Tag>
+    </Space>
+    <Divider />
+    <Space size="small" wrap>
+      <Tag bordered={false} color="magenta">
+        magenta
+      </Tag>
+      <Tag bordered={false} color="red">
+        red
+      </Tag>
+      <Tag bordered={false} color="volcano">
+        volcano
+      </Tag>
+      <Tag bordered={false} color="orange">
+        orange
+      </Tag>
+      <Tag bordered={false} color="gold">
+        gold
+      </Tag>
+      <Tag bordered={false} color="lime">
+        lime
+      </Tag>
+      <Tag bordered={false} color="green">
+        green
+      </Tag>
+      <Tag bordered={false} color="cyan">
+        cyan
+      </Tag>
+      <Tag bordered={false} color="blue">
+        blue
+      </Tag>
+      <Tag bordered={false} color="geekblue">
+        geekblue
+      </Tag>
+      <Tag bordered={false} color="purple">
+        purple
+      </Tag>
+    </Space>
+  </>
+);
+
+export default App;
diff --git a/components/tag/demo/borderlessLayout.md b/components/tag/demo/borderlessLayout.md
new file mode 100644
index 0000000000..ecfc2e6087
--- /dev/null
+++ b/components/tag/demo/borderlessLayout.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+深色背景中的无边框模式。
+
+## en-US
+
+borderless in layout background.
diff --git a/components/tag/demo/borderlessLayout.tsx b/components/tag/demo/borderlessLayout.tsx
new file mode 100644
index 0000000000..54fad60aa1
--- /dev/null
+++ b/components/tag/demo/borderlessLayout.tsx
@@ -0,0 +1,58 @@
+import { Divider, Space, Tag, theme } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  return (
+    <div style={{ backgroundColor: token.colorBgLayout, padding: 16 }}>
+      <Space size="small" wrap>
+        <Tag bordered={false}>Tag 1</Tag>
+        <Tag bordered={false}>Tag 2</Tag>
+        <Tag bordered={false} closable>
+          Tag 3
+        </Tag>
+        <Tag bordered={false} closable>
+          Tag 4
+        </Tag>
+      </Space>
+      <Divider />
+      <Space size="small" wrap>
+        <Tag bordered={false} color="magenta">
+          magenta
+        </Tag>
+        <Tag bordered={false} color="red">
+          red
+        </Tag>
+        <Tag bordered={false} color="volcano">
+          volcano
+        </Tag>
+        <Tag bordered={false} color="orange">
+          orange
+        </Tag>
+        <Tag bordered={false} color="gold">
+          gold
+        </Tag>
+        <Tag bordered={false} color="lime">
+          lime
+        </Tag>
+        <Tag bordered={false} color="green">
+          green
+        </Tag>
+        <Tag bordered={false} color="cyan">
+          cyan
+        </Tag>
+        <Tag bordered={false} color="blue">
+          blue
+        </Tag>
+        <Tag bordered={false} color="geekblue">
+          geekblue
+        </Tag>
+        <Tag bordered={false} color="purple">
+          purple
+        </Tag>
+      </Space>
+    </div>
+  );
+};
+
+export default App;
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index 9a0bb2a157..1e9244f88b 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -27,6 +27,8 @@ Tag for categorizing or markup.
 <code src="./demo/animation.tsx">Animate</code>
 <code src="./demo/icon.tsx">Icon</code>
 <code src="./demo/status.tsx">Status Tag</code>
+<code src="./demo/borderless.tsx">borderless</code>
+<code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
 <code src="./demo/customize.tsx" debug>Customize close</code>
 
 ## API
@@ -39,6 +41,7 @@ Tag for categorizing or markup.
 | closeIcon | Custom close icon                    | ReactNode   | -       | 4.4.0   |
 | color     | Color of the Tag                     | string      | -       |         |
 | icon      | Set the icon of tag                  | ReactNode   | -       |         |
+| bordered  | Whether has border style             | boolean     | true    | 5.4.0   |
 | onClose   | Callback executed when tag is closed | (e) => void | -       |         |
 
 ### Tag.CheckableTag
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index cab1239e4e..c3b4ac8fd6 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -1,14 +1,14 @@
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 import * as React from 'react';
-import { ConfigContext } from '../config-provider';
 import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { isPresetColor, isPresetStatusColor } from '../_util/colors';
-import Wave from '../_util/wave';
+import type { LiteralUnion } from '../_util/type';
 import warning from '../_util/warning';
+import Wave from '../_util/wave';
+import { ConfigContext } from '../config-provider';
 import CheckableTag from './CheckableTag';
 import useStyle from './style';
-import type { LiteralUnion } from '../_util/type';
 
 export type { CheckableTagProps } from './CheckableTag';
 
@@ -24,6 +24,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
   style?: React.CSSProperties;
   icon?: React.ReactNode;
+  bordered?: boolean;
 }
 
 export interface TagType
@@ -31,8 +32,8 @@ export interface TagType
   CheckableTag: typeof CheckableTag;
 }
 
-const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
-  {
+const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (tagProps, ref) => {
+  const {
     prefixCls: customizePrefixCls,
     className,
     rootClassName,
@@ -43,10 +44,9 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     onClose,
     closeIcon,
     closable = false,
+    bordered = true,
     ...props
-  },
-  ref,
-) => {
+  } = tagProps;
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
@@ -67,7 +67,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
 
   const isInternalColor = isPresetColor(color) || isPresetStatusColor(color);
 
-  const tagStyle = {
+  const tagStyle: React.CSSProperties = {
     backgroundColor: color && !isInternalColor ? color : undefined,
     ...style,
   };
@@ -83,6 +83,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
       [`${prefixCls}-has-color`]: color && !isInternalColor,
       [`${prefixCls}-hidden`]: !visible,
       [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-borderless`]: !bordered,
     },
     className,
     rootClassName,
@@ -99,7 +100,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
     setVisible(false);
   };
 
-  const renderCloseIcon = () => {
+  const closeIconNode = React.useMemo<React.ReactNode>(() => {
     if (closable) {
       return closeIcon ? (
         <span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
@@ -110,12 +111,14 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
       );
     }
     return null;
-  };
+  }, [closable, closeIcon, prefixCls, handleCloseClick]);
 
   const isNeedWave =
     typeof props.onClick === 'function' ||
     (children && (children as React.ReactElement<any>).type === 'a');
+
   const iconNode = icon || null;
+
   const kids = iconNode ? (
     <>
       {iconNode}
@@ -128,7 +131,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const tagNode = (
     <span {...props} ref={ref} className={tagClassName} style={tagStyle}>
       {kids}
-      {renderCloseIcon()}
+      {closeIconNode}
     </span>
   );
 
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index 384fe66bbd..235a364c3e 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -27,6 +27,8 @@ demo:
 <code src="./demo/animation.tsx">添加动画</code>
 <code src="./demo/icon.tsx">图标按钮</code>
 <code src="./demo/status.tsx">预设状态的标签</code>
+<code src="./demo/borderless.tsx">无边框</code>
+<code src="./demo/borderlessLayout.tsx" debug>深色背景中无边框</code>
 <code src="./demo/customize.tsx" debug>自定义关闭按钮</code>
 
 ## API
@@ -39,6 +41,7 @@ demo:
 | closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
 | color | 标签色 | string | - |  |
 | icon | 设置图标 | ReactNode | - |  |
+| bordered | 是否有边框 | boolean | true | 5.4.0 |
 | onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - |  |
 
 ### Tag.CheckableTag
diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts
index 90933faae6..b21e965cab 100644
--- a/components/tag/style/index.ts
+++ b/components/tag/style/index.ts
@@ -1,9 +1,9 @@
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type React from 'react';
-import type { FullToken } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import capitalize from '../../_util/capitalize';
 import { genPresetColor, resetComponent } from '../../style';
+import type { FullToken } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {}
 
@@ -14,6 +14,7 @@ interface TagToken extends FullToken<'Tag'> {
   tagDefaultColor: string;
   tagIconSize: number;
   tagPaddingHorizontal: number;
+  tagBorderlessBg: string;
 }
 
 // ============================== Styles ==============================
@@ -41,13 +42,15 @@ const genPresetStyle = (token: TagToken) =>
       color: textColor,
       background: lightColor,
       borderColor: lightBorderColor,
-
       // Inverse color
       '&-inverse': {
         color: token.colorTextLightSolid,
         background: darkColor,
         borderColor: darkColor,
       },
+      [`&${token.componentCls}-borderless`]: {
+        borderColor: 'transparent',
+      },
     },
   }));
 
@@ -138,6 +141,10 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
         marginInlineStart: paddingInline,
       },
     },
+    [`${componentCls}-borderless`]: {
+      borderColor: 'transparent',
+      background: token.tagBorderlessBg,
+    },
   };
 };
 
@@ -148,7 +155,7 @@ export default genComponentStyleHook('Tag', (token) => {
 
   const tagFontSize = token.fontSizeSM;
   const tagLineHeight = tagHeight - lineWidth * 2;
-  const tagDefaultBg = token.colorFillAlter;
+  const tagDefaultBg = token.colorFillQuaternary;
   const tagDefaultColor = token.colorText;
 
   const tagToken = mergeToken<TagToken>(token, {
@@ -158,6 +165,7 @@ export default genComponentStyleHook('Tag', (token) => {
     tagDefaultColor,
     tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
     tagPaddingHorizontal: 8, // Fixed padding.
+    tagBorderlessBg: token.colorFillTertiary,
   });
 
   return [