diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
index 02b67460f6..24800c1142 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
@@ -14,7 +14,7 @@
     display: flex;
 }
 
-.umb-button-group {
+.umb-button-group.-with-button-group-toggle {
 
     .umb-button__button {
         border-radius: @baseBorderRadius 0 0 @baseBorderRadius;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
index 49827910d0..a3eadcfbc2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
@@ -1,4 +1,4 @@
-<div class="btn-group umb-button-group" ng-class="{'dropup': direction === 'up'}">
+<div class="btn-group umb-button-group" ng-class="{ 'dropup': direction === 'up', '-with-button-group-toggle': subButtons.length > 0 }">
 
    <umb-button
       ng-if="defaultButton"
@@ -32,12 +32,11 @@
    </button>
 
     <umb-dropdown
-         ng-show="subButtons.length > 0 && dropdown.isOpen"
+         ng-if="subButtons.length > 0 && dropdown.isOpen"
          class="umb-button-group__sub-buttons"
          on-close="closeDropdown()"
          deep-blur="closeDropdown()"
-         ng-class="{'-align-right': float === 'right'}"
-         >
+         ng-class="{'-align-right': float === 'right'}">
       <umb-dropdown-item ng-repeat="subButton in subButtons">
          <button
             data-element="{{subButton.alias ? 'button-' + subButton.alias : 'button-group-secondary-' + $index }}"