diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
index 79514bb668..4360cc6995 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
@@ -8,8 +8,11 @@
          replace: true,
          templateUrl: 'views/components/buttons/umb-button-group.html',
          scope: {
-            actions: "=",
-            model: "="
+            defaultButton: "=",
+            subButtons: "=",
+            state: "=?",
+            direction: "@?",
+            float: "@?"
          }
       };
 
diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less
index cb7f2bd08f..aeff3dd0eb 100644
--- a/src/Umbraco.Web.UI.Client/src/less/belle.less
+++ b/src/Umbraco.Web.UI.Client/src/less/belle.less
@@ -97,6 +97,8 @@
 @import "components/umb-breadcrumbs.less";
 
 @import "components/buttons/umb-button.less";
+@import "components/buttons/umb-button-group.less";
+
 @import "components/umb-file-dropzone.less";
 
 //page specific styles
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
new file mode 100644
index 0000000000..0b063d094d
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button-group.less
@@ -0,0 +1,10 @@
+.umb-button-group__toggle {
+   padding-left: 8px;
+   padding-right: 8px;
+   margin-left: -1px;
+}
+
+.umb-button-group__sub-buttons.-align-right {
+   right: 0;
+   left: auto;
+}
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 8ad5ef3d13..087865a501 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,13 +1,24 @@
-<div class="btn-group dropup">
+<div class="btn-group umb-button-group" ng-class="{'dropup': direction === 'up'}">
 
-    <a class="btn btn-primary" href="#" ng-repeat="defaultAction in actions | filter: {defaultAction:'true'}" ng-click="defaultAction.action(model)" hotkey="enter" prevent-default>{{ defaultAction.label }}</a>
+   <umb-button
+      type="button"
+      action="defaultButton.handler()"
+      button-style="success"
+      state="state"
+      label="{{defaultButton.labelKey}}"
+      label-key="{{defaultButton.labelKey}}">
+   </umb-button>
 
-    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" ng-if="secondaryActions.length !== 0"><span class="caret"></span></a>
+   <a class="btn btn-success dropdown-toggle umb-button-group__toggle" data-toggle="dropdown" ng-if="subButtons.length > 0">
+      <span class="caret"></span>
+   </a>
 
-    <ul class="dropdown-menu" ng-if="secondaryActions.length !== 0">
-        <li ng-repeat="secondaryAction in actions | filter: { defaultAction:'!true' }">
-            <a href="" ng-click="secondaryAction.action(model)" prevent-default>{{ secondaryAction.label }}</a>
-        </li>
-    </ul>
+   <ul aria-labelledby="dLabel" class="dropdown-menu bottom-up umb-button-group__sub-buttons" ng-if="subButtons.length > 0" role="menu" ng-class="{'-align-right': float === 'right'}">
+      <li ng-repeat="subButton in subButtons">
+         <a href="#" ng-click="subButton.handler()" prevent-default>
+            <localize key="{{subButton.labelKey}}">{{subButton.labelKey}}</localize>
+         </a>
+      </li>
+   </ul>
 
 </div>