diff --git a/docs/web/api/button.md b/docs/web/api/button.md
index 697ad89b34..34645f47ec 100644
--- a/docs/web/api/button.md
+++ b/docs/web/api/button.md
@@ -2,7 +2,7 @@
 title: Button 按钮
 description: 按钮用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
 isComponent: true
-usage: { title: '', description: '' }
+usage: { title: "", description: "" }
 spline: base
 ---
 
@@ -70,6 +70,12 @@ Block 按钮在宽度上充满其所在的父容器（无 padding 和 margin 值
 
 {{ shape }}
 
+### 按钮组
+
+以按钮组的方式出现，可用在同级多项操作中。
+
+{{ group }}
+
 ### 自定义渲染元素
 
 支持自定义渲染元素，支持 `div/a/button`
diff --git a/style/web/components/button/_docs.less b/style/web/components/button/_docs.less
index bdc7139520..ac775640bf 100644
--- a/style/web/components/button/_docs.less
+++ b/style/web/components/button/_docs.less
@@ -1,17 +1,22 @@
 [class*="@{d-prefix}-demo-item--button"] {
+  .@{prefix}-button-group {
+    .@{prefix}-button + .@{prefix}-button {
+      margin-left: 0px;
+    }
+  }
 
   .@{prefix}-button + .@{prefix}-button {
     margin-left: 8px;
   }
 
-  .@{prefix}-button.@{prefix}-size-full-width + .@{prefix}-button.@{prefix}-size-full-width {
+  .@{prefix}-button.@{prefix}-size-full-width
+    + .@{prefix}-button.@{prefix}-size-full-width {
     margin-left: 0;
     margin-top: 8px;
   }
 }
 
 .tdesign-demo-item--button-ghost {
-
   .@{d-prefix}-demo-item__body {
     background-color: #181818;
   }
diff --git a/style/web/components/button/_index.less b/style/web/components/button/_index.less
index d4ddd0ec14..f5fd9a3610 100644
--- a/style/web/components/button/_index.less
+++ b/style/web/components/button/_index.less
@@ -369,22 +369,72 @@
   --ripple-color: @btn-color-white-bg-active;
 }
 
-.@{prefix}-button--variant-base:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
+.@{prefix}-button--variant-base:not(.@{prefix}-is-disabled):not(
+.@{prefix}-button--ghost
+) {
   --ripple-color: @btn-color-gray-bg-active;
 }
 
-.@{prefix}-button--variant-base.@{prefix}-button--theme-primary:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
+.@{prefix}-button--variant-base.@{prefix}-button--theme-primary:not(
+.@{prefix}-is-disabled
+):not(.@{prefix}-button--ghost) {
   --ripple-color: @btn-color-primary-active;
 }
 
-.@{prefix}-button--variant-base.@{prefix}-button--theme-success:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
+.@{prefix}-button--variant-base.@{prefix}-button--theme-success:not(
+.@{prefix}-is-disabled
+):not(.@{prefix}-button--ghost) {
   --ripple-color: @btn-color-success-active;
 }
 
-.@{prefix}-button--variant-base.@{prefix}-button--theme-warning:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
+.@{prefix}-button--variant-base.@{prefix}-button--theme-warning:not(
+.@{prefix}-is-disabled
+):not(.@{prefix}-button--ghost) {
   --ripple-color: @btn-color-warning-active;
 }
 
-.@{prefix}-button--variant-base.@{prefix}-button--theme-danger:not(.@{prefix}-is-disabled):not(.@{prefix}-button--ghost) {
+.@{prefix}-button--variant-base.@{prefix}-button--theme-danger:not(
+.@{prefix}-is-disabled
+):not(.@{prefix}-button--ghost) {
   --ripple-color: @btn-color-danger-active;
 }
+
+.@{prefix}-button-group {
+  display: inline-flex;
+  align-items: center;
+  .@{prefix}-button {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      border-right-color: @btn-group-border-color;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-left-color: @btn-group-border-color;
+    }
+
+    &:not(:first-child):not(:last-child) {
+      border-radius: 0;
+      border-left-color: @btn-group-border-color;
+      border-right-color: @btn-group-border-color;
+    }
+
+    &:not(:last-child) {
+      margin-right: -1px;
+    }
+
+    &:first-child:last-child {
+      border-radius: @border-radius-default;
+
+      &.is-round {
+        border-radius: @border-radius-round;
+      }
+
+      &.is-circle {
+        border-radius: 50%;
+      }
+    }
+  }
+}
diff --git a/style/web/components/button/_var.less b/style/web/components/button/_var.less
index 7111ff234e..f3ff57d204 100644
--- a/style/web/components/button/_var.less
+++ b/style/web/components/button/_var.less
@@ -106,4 +106,5 @@
 @btn-text-variant-base-color: @text-color-anti;
 
 // 状态色 - disabled ghost
-@btn-color-ghost-disabled: rgba(255, 255, 255, .22);
+@btn-color-ghost-disabled: rgba(255, 255, 255, 22%);
+@btn-group-border-color: rgba(255, 255, 255, 50%);