Add support for multiple styles on a button component

src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js

@@ -57,7 +57,7 @@ Use this directive to render an umbraco button. The directive can be used to gen
 @param {callback} action The button action which should be performed when the button is clicked.
 @param {string=} href Url/Path to navigato to.
 @param {string=} type Set the button type ("button" or "submit").
-@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link").
+@param {string=} buttonStyle Set the style of the button. The directive uses the default bootstrap styles ("primary", "info", "success", "warning", "danger", "inverse", "link", "block"). Pass in array to add multple styles [success,block].
 @param {string=} state Set a progress state on the button ("init", "busy", "success", "error").
 @param {string=} shortcut Set a keyboard shortcut for the button ("ctrl+c").
 @param {string=} label Set the button label.
@@ -83,7 +83,24 @@ Use this directive to render an umbraco button. The directive can be used to gen
             }
 
             if (scope.buttonStyle) {
-               scope.style = "btn-" + scope.buttonStyle;
+
+                // make it possible to pass in multiple styles
+                if(scope.buttonStyle.startsWith("[") && scope.buttonStyle.endsWith("]")) {
+                    
+                    // when using an attr it will always be a string so we need to remove square brackets
+                    // and turn it into and array
+                    var withoutBrackets = scope.buttonStyle.replace(/[\[\]']+/g,'');
+                    // split array by , + make sure to catch whitespaces
+                    var array = withoutBrackets.split(/\s?,\s?/g);
+                    
+                    angular.forEach(array, function(item){
+                        scope.style = scope.style + " " + "btn-" + item;
+                    });
+
+                } else {
+                    scope.style = "btn-" + scope.buttonStyle;
+                }
+
             }
 
          }

src/Umbraco.Web.UI.Client/src/less/components/buttons/umb-button.less

@@ -19,6 +19,7 @@
    display: flex;
    flex-wrap: wrap;
    align-items: center;
+   justify-content: center;
 }
 
 .umb-button__icon {