Update description, added background property and check payload before sending

button-group.html

@@ -79,4 +79,15 @@
 
 <script type="text/html" data-help-name="ui_button_group">
     <p>A simple button group node</p>
+    <p>
+        To add buttons, input an array with one of the following objects per button as msg.payload:
+        ```json
+        {
+            "label": "Dashboard Button Name",
+            "payload": {/*The payload that is send when the button is clicked*/},
+            "active": true, // Optional
+            "color": "#123456" // Optional
+        }
+        ```
+    </p>
 </script>

button-group.js

@@ -15,7 +15,7 @@ module.exports = function (RED) {
             var heightPx = config.buttonheight * sizes.sy - sizes.gy;
 
             var html = `<div style="width=100%; height=100%">
-                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px;" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
+                    <md-button id="{{$index}}" style="width:${widthPx}px; height:${heightPx}px; margin: ${sizes.gx}px ${sizes.gy}px; background-color: {{button.color}};" ng-click="buttonClick($event)" ng-repeat="button in msg.buttons">{{button.label}}</md-button>
                 </div>`;
 
             var done = ui.addWidget({
@@ -45,7 +45,9 @@ module.exports = function (RED) {
                     $scope.buttonClick = function (e) {
                         e.preventDefault();
                         var buttonId = e.target.id;
-                        $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        if ($scope.msg.buttons[buttonId].payload) {
+                            $scope.send({ "payload": $scope.msg.buttons[buttonId].payload });
+                        }
                     };
                 }
             });