diff --git a/dev/js/spec/buttongroupSpec.js b/dev/js/spec/buttongroupSpec.js
index 29fb4f5..9f20042 100644
--- a/dev/js/spec/buttongroupSpec.js
+++ b/dev/js/spec/buttongroupSpec.js
@@ -252,6 +252,36 @@
       expect(e.children[1].getAttribute("title")).toBe("Haha");
     });
 
+    it('should support active state on regular buttons', function () {
+      var group = buttonGroupClass.create();
+      let active = stateClass.create();
+      let count = 0;
+
+      group.add('Meta', {'active': active}, function () {
+        count++;
+      });
+
+      let e = group.element();
+      let button = e.firstChild;
+      let check = button.firstChild;
+
+      expect(check.classList.contains("check")).toBeTruthy();
+      expect(check.classList.contains("button-icon")).toBeTruthy();
+      expect(active.get()).toBeFalsy();
+      expect(check.classList.contains("checked")).toBeFalsy();
+      expect(count).toEqual(0);
+
+      // Clicking the check toggles active state, but does not trigger callback.
+      check.click();
+      expect(active.get()).toBeTruthy();
+      expect(check.classList.contains("checked")).toBeTruthy();
+      expect(count).toEqual(0);
+
+      // Clicking the button still triggers the callback.
+      button.click();
+      expect(count).toEqual(1);
+    });
+
     it('should allow adoption', function () {
 
       const el = document.createElement('div');
diff --git a/dev/js/src/buttongroup.js b/dev/js/src/buttongroup.js
index c6a772e..da12078 100644
--- a/dev/js/src/buttongroup.js
+++ b/dev/js/src/buttongroup.js
@@ -96,6 +96,19 @@
           b['state'] = data['state'];
         };
 
+        if (data['active'] !== undefined) {
+          let active = data['active'];
+
+	  let check = _addCheck(b,active);
+	  check.addEventListener('click', function (e) {
+	    // Do not bubble
+	    e.halt();
+            // Toggle state
+	    active.roll();
+	  });
+        };
+
+	
         if (data['desc'] !== undefined) {
           desc = data['desc'];
         };
@@ -103,7 +116,7 @@
 
       b.setAttribute('title', desc);
       b.addE('span').addT(title);
-
+      
       let that = this;
       b.addEventListener('click', function (e) {
 
@@ -174,22 +187,8 @@
       };
 
       b.setAttribute('title',desc);
-      
-      // Set check marker
-      const check = b.addE('span');
-      check.classList.add("check", "button-icon");
-      check.addE('span');
 
-      // Associate this object to state
-      // Add setState method to object
-      check.setState = function (value) {
-        if (value) {
-          this.classList.add("checked");
-        } else {
-          this.classList.remove("checked");
-        }
-      };
-      state.associate(check);
+      _addCheck(b, state);
 
       b.addE('span').addT(title);
       
@@ -229,3 +228,23 @@
     }
   }
 });
+
+function _addCheck(b,state) {
+      
+  // Set check marker
+  const check = b.addE('span');
+  check.classList.add("check", "button-icon");
+  check.addE('span');
+
+  // Associate this object to state
+  // Add setState method to object
+  check.setState = function (value) {
+    if (value) {
+      this.classList.add("checked");
+    } else {
+      this.classList.remove("checked");
+    }
+  };
+  state.associate(check);
+  return check;
+};