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
new file mode 100644
index 0000000000..8d9c9a49b6
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbuttongroup.directive.js
@@ -0,0 +1,39 @@
+angular.module("umbraco.directives")
+    .directive('umbButtonGroup', function () {
+        return {
+            scope: {
+                actions: "=",
+                model: "="
+            },
+            restrict: 'E',
+            replace: true,
+            templateUrl: 'views/components/buttons/umb-button-group.html',
+            link: function (scope, element, attrs, ctrl) {
+
+                scope.primaryAction = {};
+                scope.secondaryActions = [];
+
+                function generateActions() {
+
+                    for (var index = 0; index < scope.actions.length; index++) {
+
+                        var action = scope.actions[index];
+
+                        if( index === 0 ) {
+                            scope.primaryAction = action;
+                        } else {
+                            scope.secondaryActions.push(action);
+                        }
+                    }
+
+                }
+
+                scope.$watch('actions', function(newValue, oldValue) {
+                    if (newValue) {
+                        generateActions();
+                    }
+                });
+
+            }
+        };
+    });
\ No newline at end of file
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
new file mode 100644
index 0000000000..02e8dfdd60
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button-group.html
@@ -0,0 +1,12 @@
+<div class="btn-group dropup">
+
+    <a class="btn btn-primary" href="#" ng-click="primaryAction.action(model)" prevent-default>{{ primaryAction.label }}</a>
+    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#" ng-if="secondaryActions.length !== 0"><span class="caret"></span></a>
+
+    <ul class="dropdown-menu" ng-if="secondaryActions.length !== 0">
+        <li ng-repeat="secondaryAction in secondaryActions">
+            <a href="" ng-click="secondaryAction.action(model)" prevent-default>{{ secondaryAction.label }}</a>
+        </li>
+    </ul>
+
+</div>
\ No newline at end of file