diff --git a/Gruntfile.js b/Gruntfile.js
index 32781723..bba33a80 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -104,7 +104,7 @@ module.exports = function (grunt) {
           'js/dist/ripples.js'      : 'js/src/ripples.js',
           'js/dist/autofill.js'     : 'js/src/autofill.js',
           'js/dist/checkbox.js'    : 'js/src/checkbox.js',
-          //'js/dist/carousel.js'  : 'js/src/carousel.js',
+          'js/dist/togglebutton.js'  : 'js/src/togglebutton.js',
           //'js/dist/collapse.js'  : 'js/src/collapse.js',
           //'js/dist/dropdown.js'  : 'js/src/dropdown.js',
           //'js/dist/modal.js'     : 'js/src/modal.js',
@@ -131,7 +131,7 @@ module.exports = function (grunt) {
           'dist/js/umd/ripples.js'      : 'js/src/ripples.js',
           'dist/js/umd/autofill.js'     : 'js/src/autofill.js',
           'dist/js/umd/checkbox.js'     : 'js/src/checkbox.js',
-          //'dist/js/umd/button.js'    : 'js/src/button.js',
+          'dist/js/umd/togglebutton.js'    : 'js/src/togglebutton.js',
           //'dist/js/umd/carousel.js'  : 'js/src/carousel.js',
           //'dist/js/umd/collapse.js'  : 'js/src/collapse.js',
           //'dist/js/umd/dropdown.js'  : 'js/src/dropdown.js',
@@ -194,7 +194,7 @@ module.exports = function (grunt) {
           'js/src/ripples.js',
           'js/src/autofill.js',
           'js/src/checkbox.js',
-          //'js/src/carousel.js',
+          'js/src/togglebutton.js',
           //'js/src/collapse.js',
           //'js/src/dropdown.js',
           //'js/src/modal.js',
diff --git a/js/src/old/material.js b/js/src/old/material.js
index a63c14c2..b75e4422 100644
--- a/js/src/old/material.js
+++ b/js/src/old/material.js
@@ -59,12 +59,12 @@
     //  .data("mdproc", true)
     //  .after("<span class='checkbox-material'><span class='check'></span></span>");
     //},
-    "togglebutton": function(selector) {
-      $((selector) ? selector : this.options.togglebuttonElements)
-      .filter(":notmdproc")
-      .data("mdproc", true)
-      .after("<span class='toggle'></span>");
-    },
+    //"togglebutton": function(selector) {
+    //  $((selector) ? selector : this.options.togglebuttonElements)
+    //  .filter(":notmdproc")
+    //  .data("mdproc", true)
+    //  .after("<span class='toggle'></span>");
+    //},
     "radio": function(selector) {
       // Add fake-radio to material radios
       $((selector) ? selector : this.options.radioElements)
@@ -241,11 +241,12 @@
         this.attachInputEventHandlers();
       }
       if (this.options.checkbox) {
-        this.checkbox();
+        //this.checkbox();
         $(this.options.checkboxElements).checkbox()
       }
       if (this.options.togglebutton) {
-        this.togglebutton();
+        //this.togglebutton();
+        $(this.options.togglebuttonElements).togglebutton()
       }
       if (this.options.radio) {
         this.radio();
@@ -279,7 +280,7 @@
         }
         if (this.options.togglebutton) {
           $document.arrive(this.options.togglebuttonElements, function() {
-            $.material.togglebutton($(this));
+            $(this).togglebutton();
           });
         }
 
diff --git a/js/src/togglebutton.js b/js/src/togglebutton.js
new file mode 100644
index 00000000..433fccb1
--- /dev/null
+++ b/js/src/togglebutton.js
@@ -0,0 +1,72 @@
+//import Util from './util'
+
+const Togglebutton = (($) => {
+
+  /**
+   * ------------------------------------------------------------------------
+   * Constants
+   * ------------------------------------------------------------------------
+   */
+  const NAME = 'togglebutton'
+  const DATA_KEY = `mdb.${NAME}`
+  const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+  const Default = {
+    template: `<span class='toggle'></span>`
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * Class Definition
+   * ------------------------------------------------------------------------
+   */
+  class Togglebutton {
+
+    constructor(element, config) {
+      this.element = element
+      this.config = $.extend({}, Default, config)
+
+      this.element.after(this.config.template)
+    }
+
+    dispose() {
+      $.removeData(this.element, DATA_KEY)
+      this.element = null
+      this.config = null
+    }
+
+    // ------------------------------------------------------------------------
+    // private
+
+    // ------------------------------------------------------------------------
+    // static
+    static _jQueryInterface(config) {
+      return this.each(function () {
+        let $element = $(this)
+        let data = $element.data(DATA_KEY)
+
+        if (!data) {
+          data = new Togglebutton(this, config)
+          $element.data(DATA_KEY, data)
+        }
+      })
+    }
+  }
+
+  /**
+   * ------------------------------------------------------------------------
+   * jQuery
+   * ------------------------------------------------------------------------
+   */
+  $.fn[NAME] = Togglebutton._jQueryInterface
+  $.fn[NAME].Constructor = Togglebutton
+  $.fn[NAME].noConflict = () => {
+    $.fn[NAME] = JQUERY_NO_CONFLICT
+    return Togglebutton._jQueryInterface
+  }
+
+  return Togglebutton
+
+})(jQuery)
+
+export default Togglebutton