diff --git a/components/button/README.md b/components/button/README.md
index 4b691629..f82e380e 100644
--- a/components/button/README.md
+++ b/components/button/README.md
@@ -17,40 +17,37 @@ var vm = new Vue({
 
 ### events
 
-| event | args | Description |
-|-------|------|-------------|
-|`@click`||emitted on click |
-
+| event    | args | Description      |
+| -------- | ---- | ---------------- |
+| `@click` |      | emitted on click |
 
 ### props
 
-| prop | Type | Default | Description |
-|-------|------|---------|-------------|
-|`disabled`|String|| disable the button |
-|`accent`|Boolean|| secondary color theme |
-|`raised`| Boolean|| a contained button that is elevated upon the surface |
-|`unelevated`| Boolean|| a contained button that is flush with the surface |
-|`stroked`| Boolean|| a contained button that is flush with the surface and has a visible border(*)|
-|`dense`| String||  compresses the button text to make it slightly smaller |
-|`compact`| Boolean|| reduces the amount of horizontal padding in the button |
-|`event`|String| optional | optional event to emit on click  |
-|`event-target`|Object| vm.$root | optional event target, defaults to root bus |
-|`event-args`|Array| [] | optional event args |
-|`href`|String|| link's href, renders anchor (see notes below) | 
-|`to`|String, Object| undefined | router-link property _(*)_ |
-|`replace`|Boolean| false | router-link property _(*)_ |
-|`append`|Boolean| false | router-link property _(*)_ |
-|`exact`|Boolean| false | router-link property _(*)_ |
-|`active-class`|String| router-link-active | router-link property _(*)_ |
-|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |
-
-> _(*)_ Requires [vue-router](https://router.vuejs.org)
+| prop                 | Type           | Default                  | Description                                                                    |
+| -------------------- | -------------- | ------------------------ | ------------------------------------------------------------------------------ |
+| `disabled`           | String         |                          | disable the button                                                             |
+| `accent`             | Boolean        |                          | secondary color theme                                                          |
+| `raised`             | Boolean        |                          | a contained button that is elevated upon the surface                           |
+| `unelevated`         | Boolean        |                          | a contained button that is flush with the surface                              |
+| `stroked`            | Boolean        |                          | a contained button that is flush with the surface and has a visible border(\*) |
+| `dense`              | String         |                          | compresses the button text to make it slightly smaller                         |
+| `event`              | String         | optional                 | optional event to emit on click                                                |
+| `event-target`       | Object         | vm.$root                 | optional event target, defaults to root bus                                    |
+| `event-args`         | Array          | []                       | optional event args                                                            |
+| `href`               | String         |                          | link's href, renders anchor (see notes below)                                  |
+| `to`                 | String, Object | undefined                | router-link property _(\*)_                                                    |
+| `replace`            | Boolean        | false                    | router-link property _(\*)_                                                    |
+| `append`             | Boolean        | false                    | router-link property _(\*)_                                                    |
+| `exact`              | Boolean        | false                    | router-link property _(\*)_                                                    |
+| `active-class`       | String         | router-link-active       | router-link property _(\*)_                                                    |
+| `exact-active-class` | String         | router-link-exact-active | router-link property _(\*)_                                                    |
+
+> _(\*)_ Requires [vue-router](https://router.vuejs.org)
 
 ### text buttons
 
 ```html
 <mdc-button>Baseline</mdc-button>
-<mdc-button compact>Compact</mdc-button>
 <mdc-button dense>Dense</mdc-button>
 ```
 
@@ -58,7 +55,6 @@ var vm = new Vue({
 
 ```html
 <mdc-button raised>Baseline</mdc-button>
-<mdc-button raised compact>Compact</mdc-button>
 <mdc-button raised dense>Dense</mdc-button>
 ```
 
@@ -66,7 +62,6 @@ var vm = new Vue({
 
 ```html
 <mdc-button unelevated>Baseline</mdc-button>
-<mdc-button unelevated compact>Compact</mdc-button>
 <mdc-button unelevated dense>Dense</mdc-button>
 ```
 
@@ -97,8 +92,8 @@ If the `to` property is defined, the item behaves as a
 
 #### Accessibility Warning:
 
-> Buttons are expected to be triggered using the Space or Enter key, 
-> while links are expected to be triggered using the Enter key. 
+> Buttons are expected to be triggered using the Space or Enter key,
+> while links are expected to be triggered using the Enter key.
 > Additionally, button and links have different behaviors on right click.
 > see this [MDN note](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus)
 
@@ -116,9 +111,10 @@ You might want to keep button behavior and do the navigation programatically:
 ```
 
 ```javascript
- // register event from some component context
- this.$root.$on('my-event', () => doSomething())
+// register event from some component context
+this.$root.$on('my-event', () => doSomething());
 ```
 
 ### Reference
-- <https://material.io/guidelines/components/buttons.html>
+
+* <https://material.io/guidelines/components/buttons.html>
diff --git a/components/button/demo.vue b/components/button/demo.vue
index bcf476e1..74de5a3c 100644
--- a/components/button/demo.vue
+++ b/components/button/demo.vue
@@ -2,13 +2,13 @@
   <div class="mdc-demo">
     <div class="mdc-demo--container" style="min-height: 40px; padding-bottom: 0">
       <div class="mdc-demo-button">
-        <mdc-button :dense="dense" :compact="compact" :disabled="disabled" 
+        <mdc-button :dense="dense" :disabled="disabled" 
           :raised="raised" :stroked="stroked" :unelevated="unelevated" 
           :accent="accent">Button</mdc-button>
-        <mdc-button :dense="dense" :compact="compact" :disabled="disabled"
+        <mdc-button :dense="dense" :disabled="disabled"
           :raised="raised" :stroked="stroked" :unelevated="unelevated" 
           :accent="accent">Button</mdc-button>
-        <mdc-button :dense="dense" :compact="compact" :disabled="disabled"
+        <mdc-button :dense="dense" :disabled="disabled"
           :raised="raised" :stroked="stroked" :unelevated="unelevated"
           :accent="accent">Button</mdc-button>
       </div>  
@@ -24,7 +24,6 @@
 
       <div class="button-style-select">
         <mdc-checkbox label="disabled" v-model="disabled"></mdc-checkbox>
-        <mdc-checkbox label="compact" v-model="compact" ></mdc-checkbox>
         <mdc-checkbox label="dense"  v-model="dense"></mdc-checkbox>
         <mdc-checkbox label="accent"  v-model="accent"></mdc-checkbox>
       </div>
@@ -34,35 +33,40 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
-      type: '', 
-      dense: false, 
-      compact:false, 
-      disabled:false, 
-      accent:false
-    }
+      type: '',
+      dense: false,
+      disabled: false,
+      accent: false,
+    };
   },
   computed: {
-    raised () { return this.type == 'raised'},
-    unelevated () { return this.type == 'unelevated'},
-    stroked () { return this.type == 'stroked'},
-  }
-}
+    raised() {
+      return this.type == 'raised';
+    },
+    unelevated() {
+      return this.type == 'unelevated';
+    },
+    stroked() {
+      return this.type == 'stroked';
+    },
+  },
+};
 </script>
 
 
 <style>
 .mdc-demo-button {
   margin: 0 auto;
-  text-align:center;
+  text-align: center;
 }
 
-.button-type-select, .button-style-select {
+.button-type-select,
+.button-style-select {
   margin: 0 32px;
   display: flex;
-  flex-flow:  column nowrap;
+  flex-flow: column nowrap;
   justify-content: flex-start;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/components/button/mdc-button.vue b/components/button/mdc-button.vue
index d4b501fa..b863ff14 100644
--- a/components/button/mdc-button.vue
+++ b/components/button/mdc-button.vue
@@ -1,5 +1,5 @@
 <script>
-import mdcButtonBase from './mdc-button-base.vue'
+import mdcButtonBase from './mdc-button-base.vue';
 
 export default {
   name: 'mdc-button',
@@ -9,10 +9,9 @@ export default {
     unelevated: Boolean,
     stroked: Boolean,
     dense: Boolean,
-    compact: Boolean, 
-    accent: Boolean
+    accent: Boolean,
   },
-  data () {
+  data() {
     return {
       classes: {
         'mdc-button': true,
@@ -20,30 +19,26 @@ export default {
         'mdc-button--unelevated': this.unelevated,
         'mdc-button--stroked': this.stroked,
         'mdc-button--dense': this.dense,
-        'mdc-button--compact': this.compact,
-        'mdc-button--accent': this.accent
-      }
-    }
+        'mdc-button--accent': this.accent,
+      },
+    };
   },
   watch: {
-    raised () {
-      this.$set(this.classes, 'mdc-button--raised', this.raised )
+    raised() {
+      this.$set(this.classes, 'mdc-button--raised', this.raised);
     },
-    unelevated () {
-      this.$set(this.classes, 'mdc-button--unelevated', this.unelevated )
+    unelevated() {
+      this.$set(this.classes, 'mdc-button--unelevated', this.unelevated);
     },
-    stroked () {
-      this.$set(this.classes, 'mdc-button--stroked', this.stroked )
+    stroked() {
+      this.$set(this.classes, 'mdc-button--stroked', this.stroked);
     },
-    dense () {
-      this.$set(this.classes, 'mdc-button--dense', this.dense )
+    dense() {
+      this.$set(this.classes, 'mdc-button--dense', this.dense);
     },
-    compact () {
-      this.$set(this.classes, 'mdc-button--compact', this.compact )
+    accent() {
+      this.$set(this.classes, 'mdc-button--accent', this.accent);
     },
-    accent () {
-      this.$set(this.classes, 'mdc-button--accent', this.accent )
-    },
-  }
-}
+  },
+};
 </script>