diff --git a/src/common/action-toolbar/action-toolbar.scss b/src/common/action-toolbar/action-toolbar.scss
index d010149b583c38c3dcfda47b1f218c5cd06f033d..2d52c76a7478abf395c6326f661b2074594c4f34 100644
--- a/src/common/action-toolbar/action-toolbar.scss
+++ b/src/common/action-toolbar/action-toolbar.scss
@@ -23,15 +23,24 @@ $action-toolbar: (
     margin: getCssVar(action-toolbar, item-margin);
 
     @include m(icon) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: getCssVar('width-icon','medium');
-      height: getCssVar('width-icon','medium');
-      margin-right: getCssVar('spacing','extra-tight');
-      font-size: getCssVar('width-icon','medium');
+      @include when('has-icon') {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: getCssVar('width-icon', 'medium');
+        height: getCssVar('width-icon', 'medium');
+        margin-right: getCssVar('spacing','extra-tight');
+        margin-left: getCssVar('spacing','extra-tight');
+        font-size: getCssVar('width-icon', 'medium');
+      }
+    }
+    @include m('label') {
+      @include when('has-caption') {
+        margin-right: getCssVar('spacing','extra-tight');
+      }
     }
 
+
     &+& {
       margin: getCssVar(action-toolbar, item-margin);
     }
diff --git a/src/common/action-toolbar/action-toolbar.tsx b/src/common/action-toolbar/action-toolbar.tsx
index 14df69129b056ae1095cdd0cf6cd5a888a43a542..e8ecdc7d17d933690d545aea6f698b667b2febc9 100644
--- a/src/common/action-toolbar/action-toolbar.tsx
+++ b/src/common/action-toolbar/action-toolbar.tsx
@@ -147,12 +147,30 @@ export const IBizActionToolbar = defineComponent({
               disabled={this.actionsState[detail.id!].disabled}
               class={this.calcActionItemClass(detail)}
             >
-              <div class={this.ns.em('item', 'icon')}>
+              <div
+                class={[
+                  this.ns.em('item', 'icon'),
+                  this.ns.is(
+                    'has-caption',
+                    detail.showCaption && detail.caption,
+                  ),
+                  this.ns.is('has-icon', detail.showIcon && detail.sysImage),
+                ]}
+              >
                 {detail.showIcon && detail.sysImage && (
                   <iBizIcon icon={detail.sysImage}></iBizIcon>
                 )}
               </div>
-              <div class={this.ns.em('item', 'label')}>
+              <div
+                class={[
+                  this.ns.em('item', 'label'),
+                  this.ns.is(
+                    'has-caption',
+                    detail.showCaption && detail.caption,
+                  ),
+                  this.ns.is('has-icon', detail.showIcon && detail.sysImage),
+                ]}
+              >
                 {detail.showCaption ? detail.caption : ''}
               </div>
             </el-button>,