diff --git a/demo/js/base/button/demo.button.js b/demo/js/base/button/demo.button.js
index 0aa54de07..195fe06e2 100644
--- a/demo/js/base/button/demo.button.js
+++ b/demo/js/base/button/demo.button.js
@@ -213,6 +213,35 @@ Demo.Button = BI.inherit(BI.Widget, {
                 },
                 height: 30
             }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在上面的按钮，而且可以自动撑开高度",
+                iconCls: "close-font",
+                iconGap: 24,
+                iconPosition: "top"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在下面的按钮",
+                iconCls: "close-font",
+                iconPosition: "bottom"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在左边的按钮",
+                iconCls: "close-font",
+                iconPosition: "left"
+            }
+        }, {
+            el: {
+                type: "bi.button",
+                text: "图标在右边的按钮",
+                iconCls: "close-font",
+                iconPosition: "right"
+            }
         }];
         // BI.each(items, function (i, item) {
         //     item.el.handler = function () {
@@ -228,4 +257,4 @@ Demo.Button = BI.inherit(BI.Widget, {
         };
     }
 });
-BI.shortcut("demo.button", Demo.Button);
\ No newline at end of file
+BI.shortcut("demo.button", Demo.Button);
diff --git a/package.json b/package.json
index 97dbccae2..152a1d5b2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fineui",
-  "version": "2.0.20220525190446",
+  "version": "2.0.20220527140850",
   "description": "fineui",
   "main": "dist/fineui.min.js",
   "types": "dist/lib/index.d.ts",
diff --git a/src/base/single/button/buttons/button.js b/src/base/single/button/buttons/button.js
index 0863d0935..7c3f4c186 100644
--- a/src/base/single/button/buttons/button.js
+++ b/src/base/single/button/buttons/button.js
@@ -1,169 +1,208 @@
-/**
- * 文字类型的按钮
- * @class BI.Button
- * @extends BI.BasicButton
- *
- * @cfg {JSON} options 配置属性
- * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
- */
-BI.Button = BI.inherit(BI.BasicButton, {
+(function () {
+    function isVertical(position) {
+        return position === "top" || position === "bottom";
+    }
+
+    /**
+     * 文字类型的按钮
+     * @class BI.Button
+     * @extends BI.BasicButton
+     *
+     * @cfg {JSON} options 配置属性
+     * @cfg {'common'/'success'/'warning'/'ignore'} [options.level='common'] 按钮类型，用不同颜色强调不同的场景
+     */
+    BI.Button = BI.inherit(BI.BasicButton, {
 
-    _const: {
-        iconWidth: 18
-    },
+        _const: {
+            iconWidth: 16
+        },
 
-    _defaultConfig: function (props) {
-        var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
-            attributes: {
-                tabIndex: 1
-            },
-            minWidth: (props.block === true || props.clear === true) ? 0 : 80,
-            height: 24,
-            shadow: props.clear !== true,
-            isShadowShowingOnSelected: true,
-            readonly: true,
-            iconCls: "",
-            level: "common",
-            block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
-            clear: false, // 是否去掉边框和背景
-            ghost: false, // 是否幽灵显示, 即正常状态无背景
-            textAlign: "center",
-            whiteSpace: "nowrap",
-            textWidth: null,
-            textHeight: null,
-            hgap: props.clear ? 0 : 10,
-            vgap: 0,
-            tgap: 0,
-            bgap: 0,
-            lgap: 0,
-            rgap: 0
-        });
-    },
+        _defaultConfig: function (props) {
+            var conf = BI.Button.superclass._defaultConfig.apply(this, arguments);
+
+            return BI.extend(conf, {
+                baseCls: (conf.baseCls || "") + " bi-button" + ((BI.isIE() && BI.isIE9Below()) ? " hack" : ""),
+                attributes: {
+                    tabIndex: 1
+                },
+                minWidth: (props.block === true || props.clear === true) ? 0 : 80,
+                // 44 = 垂直间距 6 + 边框 2 + 图标 16 + 图标和文字间隔 8 + 文字 12
+                height: isVertical(props.iconPosition) ? 44 + ((props.iconGap || 8) - 8) : 24,
+                shadow: props.clear !== true,
+                isShadowShowingOnSelected: true,
+                readonly: true,
+                iconCls: "",
+                level: "common",
+                block: false, // 是否块状显示，即不显示边框，没有最小宽度的限制
+                clear: false, // 是否去掉边框和背景
+                ghost: false, // 是否幽灵显示, 即正常状态无背景
+                loading: false, // 是否处于加载中
+                textAlign: "center",
+                whiteSpace: "nowrap",
+                textWidth: null,
+                textHeight: null,
+                hgap: props.clear ? 0 : 10,
+                vgap: 0,
+                tgap: 0,
+                bgap: 0,
+                lgap: 0,
+                rgap: 0,
+                iconGap: 8,
+                iconPosition: "left"
+            });
+        },
 
-    render: function () {
-        var o = this.options, self = this;
+        render: function () {
+            var o = this.options;
 
-        // 由于button默认情况下有个边框，所以要主动算行高
-        var lineHeight, textHeight = o.textHeight;
-        if (BI.isNumber(o.height)) {
-            if (o.clear || o.block) {
-                lineHeight = o.height;
+            // 由于button默认情况下有个边框，所以要主动算行高
+            var lineHeight, textHeight = o.textHeight;
+            if (BI.isNumber(o.height)) {
+                if (!isVertical(o.iconPosition)) {
+                    if (o.clear || o.block) {
+                        lineHeight = o.height;
+                    } else {
+                        lineHeight = o.height - 2;
+                    }
+                } else {
+                    lineHeight = textHeight;
+                }
+            }
+            if (!textHeight) {
+                if (o.whiteSpace === "nowrap") {
+                    textHeight = lineHeight;
+                }
+            }
+            if (BI.isKey(o.iconCls)) {
+                this.icon = BI.createWidget({
+                    type: "bi.icon_label",
+                    cls: o.iconCls,
+                    width: this._const.iconWidth,
+                    height: lineHeight,
+                    lineHeight: lineHeight
+                });
+                this.text = BI.createWidget({
+                    type: "bi.label",
+                    text: o.text,
+                    textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
+                    textHeight: textHeight,
+                    height: lineHeight,
+                    value: o.value
+                });
+                var layoutType = "bi.horizontal";
+                var gapContainer = {
+                    lgap: o.iconPosition === "left" && o.text ? o.iconGap : 0,
+                    rgap: o.iconPosition === "right" ? o.iconGap : 0,
+                    tgap: o.iconPosition === "top" ? o.iconGap : 0,
+                    bgap: o.iconPosition === "bottom" ? o.iconGap : 0
+                };
+                var items = [this.icon, BI.extend({el: this.text}, gapContainer)];
+                if (isVertical(o.iconPosition)) {
+                    layoutType = "bi.vertical";
+                }
+                if (o.iconPosition === "right" || o.iconPosition === "bottom") {
+                    items = [BI.extend({el: this.text}, gapContainer), this.icon];
+                }
+                BI.createWidget({
+                    type: "bi.center_adapt",
+                    element: this,
+                    hgap: o.hgap,
+                    vgap: o.vgap,
+                    items: [{
+                        type: layoutType,
+                        horizontalAlign: "center",
+                        verticalAlign: "middle",
+                        items: items
+                    }]
+                });
             } else {
-                lineHeight = o.height - 2;
+                this.text = BI.createWidget({
+                    type: "bi.label",
+                    height: o.height,
+                    textAlign: o.textAlign,
+                    whiteSpace: o.whiteSpace,
+                    textWidth: o.textWidth,
+                    textHeight: textHeight,
+                    hgap: o.hgap,
+                    vgap: o.vgap,
+                    tgap: o.tgap,
+                    bgap: o.bgap,
+                    lgap: o.lgap,
+                    rgap: o.rgap,
+                    element: this,
+                    text: o.text,
+                    value: o.value
+                });
             }
-        }
-        if (!textHeight) {
-            if (o.whiteSpace === "nowrap") {
-                textHeight = lineHeight;
+            if (o.block === true) {
+                this.element.addClass("block");
             }
-        }
-        if (BI.isKey(o.iconCls)) {
-            this.icon = BI.createWidget({
-                type: "bi.icon_label",
-                cls: o.iconCls,
-                width: this._const.iconWidth,
-                height: lineHeight,
-                lineHeight: lineHeight,
-                iconWidth: o.iconWidth,
-                iconHeight: o.iconHeight
-            });
-            this.text = BI.createWidget({
-                type: "bi.label",
-                text: o.text,
-                textWidth: BI.isNotNull(o.textWidth) ? o.textWidth - this._const.iconWidth : null,
-                textHeight: textHeight,
-                height: lineHeight,
-                value: o.value
-            });
-            BI.createWidget({
-                type: "bi.center_adapt",
-                element: this,
-                hgap: o.hgap,
-                vgap: o.vgap,
-                items: [{
-                    type: "bi.horizontal",
-                    columnSize: ["", "fill"],
-                    items: [this.icon, this.text]
-                }]
-            });
-        } else {
-            this.text = BI.createWidget({
-                type: "bi.label",
-                height: o.height,
-                textAlign: o.textAlign,
-                whiteSpace: o.whiteSpace,
-                textWidth: o.textWidth,
-                textHeight: textHeight,
-                hgap: o.hgap,
-                vgap: o.vgap,
-                tgap: o.tgap,
-                bgap: o.bgap,
-                lgap: o.lgap,
-                rgap: o.rgap,
-                element: this,
-                text: o.text,
-                value: o.value
-            });
-        }
-        if (o.block === true) {
-            this.element.addClass("block");
-        }
-        if (o.clear === true) {
-            this.element.addClass("clear");
-        }
-        if (o.ghost === true) {
-            this.element.addClass("ghost");
-        }
-        if (o.minWidth > 0) {
-            this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
-        }
-    },
+            if (o.clear === true) {
+                this.element.addClass("clear");
+            }
+            if (o.ghost === true) {
+                this.element.addClass("ghost");
+            }
+            if (o.loading === true) {
+                this.element.addClass("loading");
+            }
+            if (o.minWidth > 0) {
+                this.element.css({"min-width": o.minWidth / BI.pixRatio + BI.pixUnit});
+            }
+        },
 
-    doClick: function () {
-        BI.Button.superclass.doClick.apply(this, arguments);
-        if (this.isValid()) {
-            this.fireEvent(BI.Button.EVENT_CHANGE, this);
-        }
-    },
+        doClick: function () {
+            BI.Button.superclass.doClick.apply(this, arguments);
+            if (this.isValid()) {
+                this.fireEvent(BI.Button.EVENT_CHANGE, this);
+            }
+        },
 
-    _setEnable: function (enable) {
-        BI.Button.superclass._setEnable.apply(this, arguments);
-        if (enable === true) {
-            this.element.attr("tabIndex", 1);
-        } else if (enable === false) {
-            this.element.removeAttr("tabIndex");
-        }
-    },
+        _setEnable: function (enable) {
+            BI.Button.superclass._setEnable.apply(this, arguments);
+            if (enable === true) {
+                this.element.attr("tabIndex", 1);
+            } else if (enable === false) {
+                this.element.removeAttr("tabIndex");
+            }
+        },
 
-    setText: function (text) {
-        BI.Button.superclass.setText.apply(this, arguments);
-        this.text.setText(text);
-    },
+        setLoading: function (loading) {
+            if(loading) {
+              this.element.addClass("loading");
+            } else {
+              this.element.removeClass("loading");
+            }
+        },
 
-    setValue: function (text) {
-        BI.Button.superclass.setValue.apply(this, arguments);
-        if (!this.isReadOnly()) {
-            this.text.setValue(text);
-        }
-    },
+        setText: function (text) {
+            BI.Button.superclass.setText.apply(this, arguments);
+            this.text.setText(text);
+        },
 
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+        setValue: function (text) {
+            BI.Button.superclass.setValue.apply(this, arguments);
+            if (!this.isReadOnly()) {
+                this.text.setValue(text);
+            }
+        },
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+        doRedMark: function () {
+            this.text.doRedMark.apply(this.text, arguments);
+        },
 
-    doHighLight: function () {
-        this.text.doHighLight.apply(this.text, arguments);
-    },
+        unRedMark: function () {
+            this.text.unRedMark.apply(this.text, arguments);
+        },
 
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
-    }
-});
-BI.shortcut("bi.button", BI.Button);
-BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
+        doHighLight: function () {
+            this.text.doHighLight.apply(this.text, arguments);
+        },
+
+        unHighLight: function () {
+            this.text.unHighLight.apply(this.text, arguments);
+        }
+    });
+    BI.shortcut("bi.button", BI.Button);
+    BI.Button.EVENT_CHANGE = "EVENT_CHANGE";
+}());
diff --git a/src/base/single/tip/tip.toast.js b/src/base/single/tip/tip.toast.js
index bf00dc014..3d26f6bc0 100644
--- a/src/base/single/tip/tip.toast.js
+++ b/src/base/single/tip/tip.toast.js
@@ -20,7 +20,8 @@ BI.Toast = BI.inherit(BI.Tip, {
             text: "",
             level: "success", // success或warning
             autoClose: true,
-            closable: null
+            closable: null,
+            vgap: 7,
         });
     },
 
@@ -102,7 +103,7 @@ BI.Toast = BI.inherit(BI.Tip, {
             horizontalAlign: BI.HorizontalAlign.Stretch,
             element: this,
             items: items,
-            vgap: 12,
+            vgap: o.vgap,
             columnSize: columnSize
         });
     },
diff --git a/src/case/combo/bubblecombo/popup.bubble.js b/src/case/combo/bubblecombo/popup.bubble.js
index c65905821..7bc1f500c 100644
--- a/src/case/combo/bubblecombo/popup.bubble.js
+++ b/src/case/combo/bubblecombo/popup.bubble.js
@@ -48,8 +48,8 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
             if (BI.isWidget(buttonOpt)) {
                 items.push({
                     el: buttonOpt,
-                    lgap: i === 0 ? 20 : 15,
-                    rgap: i === o.buttons.length - 1 ? 20 : 0
+                    lgap: i === 0 ? 15 : 10,
+                    rgap: i === o.buttons.length - 1 ? 15 : 0
                 });
             } else {
                 items.push({
@@ -60,14 +60,14 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
                             self.fireEvent(BI.BubblePopupBarView.EVENT_CLICK_TOOLBAR_BUTTON, v);
                         }
                     }, buttonOpt),
-                    lgap: i === 0 ? 20 : 15,
-                    rgap: i === o.buttons.length - 1 ? 20 : 0
+                    lgap: i === 0 ? 15 : 10,
+                    rgap: i === o.buttons.length - 1 ? 15 : 0
                 });
             }
         });
         return BI.createWidget({
             type: "bi.right_vertical_adapt",
-            height: 54,
+            height: 44,
             items: items
         });
     },
@@ -90,7 +90,7 @@ BI.BubblePopupBarView = BI.inherit(BI.BubblePopupView, {
             }]
         });
 
-        button.element.css("min-height", o.minHeight - 54);
+        button.element.css("min-height", o.minHeight - 44);
 
         return button;
     }