diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
index cb0e4c92fb..b503648317 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js
@@ -78,6 +78,8 @@ Use this directive to render an umbraco button. The directive can be used to gen
 
          function activate() {
 
+             scope.blockElement = false;
+
             if (!scope.state) {
                scope.state = "init";
             }
@@ -95,10 +97,16 @@ Use this directive to render an umbraco button. The directive can be used to gen
                     
                     angular.forEach(array, function(item){
                         scope.style = scope.style + " " + "btn-" + item;
+                        if(item === "block") {
+                            scope.blockElement = true;
+                        }
                     });
 
                 } else {
                     scope.style = "btn-" + scope.buttonStyle;
+                    if(scope.buttonStyle === "block") {
+                        scope.blockElement = true;
+                    }
                 }
 
             }
diff --git a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
index 98a3b7bb82..ee7af8c03c 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less
@@ -132,4 +132,9 @@
 .umb-button--xl {
     padding: 18px 52px;
     font-size: 16px;
+}
+/* types */
+.umb-button--block {
+    display: block;
+    width: 100%;
 }
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index adfc31eb8a..026ea4b0e9 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -1,4 +1,4 @@
-<div class="umb-button">
+<div class="umb-button" ng-class="{'umb-button--block': blockElement}">
 
    <div class="icon-check umb-button__success" ng-class="{'-hidden': state !== 'success', '-white': style}"></div>