diff --git a/Merger.js b/Merger.js
index a4b4e74..f8a1c84 100644
--- a/Merger.js
+++ b/Merger.js
@@ -1295,6 +1295,71 @@
     }
 
 	/**
+	 * Toggle Button control creation
+	 */
+    function toggleButton(id, def) {
+        var c = control("toggleButton", id, core.mkDefinition({
+            setText: function (text) {
+                this.innerText = text;
+            },
+            style: {
+                border: "0",
+                borderRadius: "7px",
+                background: sys.color.frame,
+                color: sys.color.framecontrast,
+                height: "20px",
+            },
+            onmousedown: function () {
+                this.style.merge({
+                    background: sys.color.framecontrast,
+                    color: sys.color.frame,
+                })
+            },
+            onmouseup: function () {
+                this.style.merge({
+                    background: sys.color.frame,
+                    color: sys.color.framecontrast,
+                })
+            },
+            onmouseleave: function () {
+                this.style.merge({
+                    background: this.selected ? sys.color.selection : sys.color.frame,
+                    color: sys.color.framecontrast,
+                })
+            },
+            getGroupButtons: function () {
+                var group = [], bros = this.getWindow().content, i;
+                for (i in bros) {
+                    var b = bros[i];
+                    if (b._type == "toggleButton" && b.group == this.group)
+                        group.push(b);
+                }
+                return group;
+            }
+        }, def), core.mkTag("button"));
+        c.setText(def.text);
+        c.addEventListener("click", function () {
+            if (this.group) {
+                var grp = this.getGroupButtons(), tb;
+                for (i in grp) {
+                    var tb = grp[i];
+                    if (tb.selected) {
+                        tb.selected = false;
+                        tb.style.background = sys.color.frame;
+                    }
+                }
+                this.selected = true;
+            } else
+                this.selected = !this.selected;
+
+            this.style.background = this.selected ? sys.color.selection : sys.color.frame;
+            if (this.onClick)
+                this.onClick.apply(this, arguments)
+        }, false);
+        return c;
+    }
+
+	/**
 	 * DropDown control creation
 	 */
     function dropdown(id, def, listMode) {
@@ -1449,6 +1514,7 @@
         // -- UI
         ui: {
             button: button,
+            toggleButton: toggleButton,
             checkbox: checkbox,
             dialog: dialog,
             dropdown: dropdown,
diff --git a/MergerTester.js b/MergerTester.js
index 819c5c3..8d5da5c 100644
--- a/MergerTester.js
+++ b/MergerTester.js
@@ -84,6 +84,36 @@
                     height: 80,
                     items: [{ key: "clRed", value: "Red" }, { key: "clBlue", value: "Blue" }, { key: "clGreen", value: "Green" }],
                 }),
+                merger.ui.button("sample_button", {
+                    top: 0,
+                    left: 160,
+                    width: 60,
+                    height: 20,
+                    text: "Button",
+                }),
+                merger.ui.toggleButton("sample_tbutton", {
+                    top: 30,
+                    left: 160,
+                    width: 60,
+                    height: 20,
+                    text: "Toggle",
+                }),
+                merger.ui.toggleButton("sample_tbuttonG1", {
+                    top: 60,
+                    left: 160,
+                    width: 90,
+                    height: 20,
+                    text: "Toggle Group",
+                    group: "G1"
+                }),
+                merger.ui.toggleButton("sample_tbuttonG2", {
+                    top: 90,
+                    left: 160,
+                    width: 90,
+                    height: 20,
+                    text: "Toggle Group",
+                    group: "G1"
+                }),
                 merger.ui.button("Bok", {
                     top: 200 - 20,
                     left: 400 - 35,