Use mwc-button instead of paper-button (#2744)

* Convert from paper-button to mwc-button

* Fixes

* Bye paper-button

* Fixes

* Final fixes

* Fix rebase conversion

demo/src/custom-cards/ha-demo-card.ts

@@ -7,7 +7,7 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "@polymer/paper-icon-button";
-import "@polymer/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import "../../../src/components/ha-card";
 import { LovelaceCard, Lovelace } from "../../../src/panels/lovelace/types";
@@ -85,7 +85,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         </div>
         <div class="actions">
           <a href="https://www.home-assistant.io" target="_blank">
-            <paper-button>Learn more about Home Assistant</paper-button>
+            <mwc-button>Learn more about Home Assistant</mwc-button>
           </a>
         </div>
       </ha-card>
@@ -146,12 +146,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
         }
 
         .actions {
-          padding-left: 5px;
+          padding-left: 8px;
-        }
-
-        .actions paper-button {
-          color: var(--primary-color);
-          font-weight: 500;
         }
       `,
     ];

gallery/src/demos/demo-util-long-press.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import "../../../src/components/ha-card";
 import { longPress } from "../../../src/panels/lovelace/common/directives/long-press-directive";
@@ -11,13 +11,13 @@ export class DemoUtilLongPress extends LitElement {
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
-            <paper-button
+            <mwc-button
               @ha-click="${this._handleTap}"
               @ha-hold="${this._handleHold}"
               .longPress="${longPress()}"
             >
               (long) press me!
-            </paper-button>
+            </mwc-button>
 
             <textarea></textarea>
 
@@ -60,11 +60,6 @@ export class DemoUtilLongPress extends LitElement {
           margin-bottom: 16px;
         }
 
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
-
         textarea {
           height: 50px;
         }

hassio/src/addon-view/hassio-addon-audio.js

@@ -1,6 +1,6 @@
 import "web-animations-js/web-animations-next-lite.min";
 
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -65,7 +65,7 @@ class HassioAddonAudio extends EventsMixin(PolymerElement) {
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
-          <paper-button on-click="_saveSettings">Save</paper-button>
+          <mwc-button on-click="_saveSettings">Save</mwc-button>
         </div>
       </paper-card>
     `;

hassio/src/addon-view/hassio-addon-config.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -50,8 +50,8 @@ class HassioAddonConfig extends PolymerElement {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped" disabled="[[!configParsed]]"
+          <mwc-button on-click="saveTapped" disabled="[[!configParsed]]"
-            >Save</paper-button
+            >Save</mwc-button
           >
         </div>
       </paper-card>

hassio/src/addon-view/hassio-addon-info.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-icon/iron-icon";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -77,7 +77,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           color: white;
           --paper-card-header-color: white;
         }
-        paper-card.warning paper-button {
+        paper-card.warning mwc-button {
           color: white !important;
         }
         .warning {
@@ -169,7 +169,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
               >Update</ha-call-api-button
             >
             <template is="dom-if" if="[[addon.changelog]]">
-              <paper-button on-click="openChangelog">Changelog</paper-button>
+              <mwc-button on-click="openChangelog">Changelog</mwc-button>
             </template>
           </div>
         </paper-card>
@@ -219,7 +219,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 Protection mode on this addon is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this addon.
               </div>
               <div class="card-actions">
-                  <paper-button on-click="protectionToggled">Enable Protection mode</paper-button>
+                  <mwc-button on-click="protectionToggled">Enable Protection mode</mwc-button>
                 </div>
               </div>
             </paper-card>
@@ -337,8 +337,8 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
         </div>
         <div class="card-actions">
           <template is="dom-if" if="[[addon.version]]">
-            <paper-button class="warning" on-click="_unistallClicked"
+            <mwc-button class="warning" on-click="_unistallClicked"
-              >Uninstall</paper-button
+              >Uninstall</mwc-button
             >
             <template is="dom-if" if="[[addon.build]]">
               <ha-call-api-button
@@ -378,7 +378,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                 tabindex="-1"
                 target="_blank"
                 class="right"
-                ><paper-button>Open web UI</paper-button></a
+                ><mwc-button>Open web UI</mwc-button></a
               >
             </template>
           </template>

hassio/src/addon-view/hassio-addon-logs.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioAddonLogs extends PolymerElement {
       <paper-card heading="Log">
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;

hassio/src/addon-view/hassio-addon-network.js

@@ -60,7 +60,7 @@ class HassioAddonNetwork extends EventsMixin(PolymerElement) {
             data="[[resetData]]"
             >Reset to defaults</ha-call-api-button
           >
-          <paper-button on-click="saveTapped">Save</paper-button>
+          <mwc-button on-click="saveTapped">Save</mwc-button>
         </div>
       </paper-card>
     `;

hassio/src/dashboard/hassio-hass-update.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -56,7 +56,7 @@ class HassioHassUpdate extends PolymerElement {
                 <a
                   href="https://github.com/home-assistant/home-assistant/releases"
                   target="_blank"
-                  ><paper-button>Release notes</paper-button></a
+                  ><mwc-button>Release notes</mwc-button></a
                 >
               </div>
             </paper-card>

hassio/src/snapshots/hassio-snapshot.js

@@ -1,5 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
@@ -123,12 +123,12 @@ class HassioSnapshot extends PolymerElement {
             class="download"
             title="Download snapshot"
           ></paper-icon-button>
-          <paper-button on-click="_partialRestoreClicked"
+          <mwc-button on-click="_partialRestoreClicked"
-            >Restore selected</paper-button
+            >Restore selected</mwc-button
           >
           <template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">
-            <paper-button on-click="_fullRestoreClicked"
+            <mwc-button on-click="_fullRestoreClicked"
-              >Wipe &amp; restore</paper-button
+              >Wipe &amp; restore</mwc-button
             >
           </template>
         </div>

hassio/src/snapshots/hassio-snapshots.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
@@ -90,10 +90,10 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
               </template>
             </div>
             <div class="card-actions">
-              <paper-button
+              <mwc-button
                 disabled="[[creatingSnapshot]]"
                 on-click="_createSnapshot"
-                >Create</paper-button
+                >Create</mwc-button
               >
             </div>
           </paper-card>

hassio/src/system/hassio-host-info.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -39,7 +39,7 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
           color: var(--google-red-500);
           margin-top: 16px;
         }
-        paper-button.info {
+        mwc-button.info {
           max-width: calc(50% - 12px);
         }
         table.info {
@@ -67,13 +67,13 @@ class HassioHostInfo extends EventsMixin(PolymerElement) {
               </template>
             </tbody>
           </table>
-          <paper-button raised on-click="_showHardware" class="info">
+          <mwc-button raised on-click="_showHardware" class="info">
             Hardware
-          </paper-button>
+          </mwc-button>
           <template is="dom-if" if="[[_featureAvailable(data, 'hostname')]]">
-            <paper-button raised on-click="_changeHostnameClicked" class="info">
+            <mwc-button raised on-click="_changeHostnameClicked" class="info">
               Change hostname
-            </paper-button>
+            </mwc-button>
           </template>
           <template is="dom-if" if="[[errors]]">
             <div class="errors">Error: [[errors]]</div>

hassio/src/system/hassio-supervisor-info.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -80,11 +80,11 @@ class HassioSupervisorInfo extends EventsMixin(PolymerElement) {
             >
           </template>
           <template is="dom-if" if='[[_equals(data.channel, "stable")]]'>
-            <paper-button
+            <mwc-button
               on-click="_joinBeta"
               class="warning"
               title="Get beta updates for Home Assistant (RCs), supervisor and host"
-              >Join beta channel</paper-button
+              >Join beta channel</mwc-button
             >
           </template>
         </div>

hassio/src/system/hassio-supervisor-log.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -24,7 +24,7 @@ class HassioSupervisorLog extends PolymerElement {
       <paper-card>
         <div class="card-content" id="content"></div>
         <div class="card-actions">
-          <paper-button on-click="refresh">Refresh</paper-button>
+          <mwc-button on-click="refresh">Refresh</mwc-button>
         </div>
       </paper-card>
     `;

package.json

@@ -17,6 +17,8 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
+    "@material/mwc-button": "^0.3.6",
+    "@material/mwc-ripple": "^0.3.6",
     "@mdi/svg": "^3.0.39",
     "@polymer/app-layout": "^3.0.1",
     "@polymer/app-localize-behavior": "^3.0.1",
@@ -35,7 +37,6 @@
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
     "@polymer/neon-animation": "^3.0.1",
-    "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.0.1",
     "@polymer/paper-dialog": "^3.0.1",

src/auth/ha-auth-flow.js

@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import "../components/ha-form";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -55,8 +55,8 @@ class HaAuthFlow extends localizeLiteMixin(PolymerElement) {
             ></ha-form>
           </template>
           <div class="action">
-            <paper-button raised on-click="_handleSubmit"
+            <mwc-button raised on-click="_handleSubmit"
-              >[[_computeSubmitCaption(_step.type)]]</paper-button
+              >[[_computeSubmitCaption(_step.type)]]</mwc-button
             >
           </div>
         </template>

src/cards/ha-persistent_notification-card.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -38,7 +38,7 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
         ha-markdown img {
           max-width: 100%;
         }
-        paper-button {
+        mwc-button {
           margin: 8px;
           font-weight: 500;
         }
@@ -46,8 +46,8 @@ class HaPersistentNotificationCard extends LocalizeMixin(PolymerElement) {
 
       <ha-card header="[[computeTitle(stateObj)]]">
         <ha-markdown content="[[stateObj.attributes.message]]"></ha-markdown>
-        <paper-button on-click="dismissTap"
+        <mwc-button on-click="dismissTap"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
         >
       </ha-card>
     `;

src/components/buttons/ha-progress-button.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -12,26 +12,22 @@ class HaProgressButton extends PolymerElement {
           display: inline-block;
         }
 
-        paper-button {
+        mwc-button {
           transition: all 1s;
         }
 
-        .success paper-button {
+        .success mwc-button {
-          color: white;
+          --mdc-theme-primary: white;
           background-color: var(--google-green-500);
           transition: none;
         }
 
-        .error paper-button {
+        .error mwc-button {
-          color: white;
+          --mdc-theme-primary: white;
           background-color: var(--google-red-500);
           transition: none;
         }
 
-        paper-button[disabled] {
-          color: #c8c8c8;
-        }
-
         .progress {
           @apply --layout;
           @apply --layout-center-center;
@@ -43,13 +39,13 @@ class HaProgressButton extends PolymerElement {
         }
       </style>
       <div class="container" id="container">
-        <paper-button
+        <mwc-button
           id="button"
           disabled="[[computeDisabled(disabled, progress)]]"
           on-click="buttonTapped"
         >
           <slot></slot>
-        </paper-button>
+        </mwc-button>
         <template is="dom-if" if="[[progress]]">
           <div class="progress"><paper-spinner active=""></paper-spinner></div>
         </template>

src/components/ha-vacuum-state.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -38,21 +38,21 @@ class HaVacuumState extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
           height: 37px;
           margin-right: -0.57em;
         }
-        paper-button[disabled] {
+        mwc-button[disabled] {
           background-color: transparent;
           color: var(--secondary-text-color);
         }
       </style>
 
-      <paper-button on-click="_callService" disabled="[[!_interceptable]]"
+      <mwc-button on-click="_callService" disabled="[[!_interceptable]]"
-        >[[_computeLabel(stateObj.state, _interceptable)]]</paper-button
+        >[[_computeLabel(stateObj.state, _interceptable)]]</mwc-button
       >
     `;
   }

src/dialogs/ha-store-auth-card.js

@@ -37,11 +37,11 @@ class HaStoreAuth extends LocalizeMixin(PolymerElement) {
       <paper-card elevation="4">
         <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
         <div class="card-actions">
-          <paper-button on-click="_done"
+          <mwc-button on-click="_done"
-            >[[localize('ui.auth_store.decline')]]</paper-button
+            >[[localize('ui.auth_store.decline')]]</mwc-button
           >
-          <paper-button primary on-click="_save"
+          <mwc-button raised on-click="_save"
-            >[[localize('ui.auth_store.confirm')]]</paper-button
+            >[[localize('ui.auth_store.confirm')]]</mwc-button
           >
         </div>
       </paper-card>

src/dialogs/more-info/controls/more-info-alarm_control_panel.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -27,15 +27,15 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
           display: flex;
           flex-direction: column;
         }
-        .pad paper-button {
+        .pad mwc-button {
           width: 80px;
         }
-        .actions paper-button {
+        .actions mwc-button {
           min-width: 160px;
           margin-bottom: 16px;
           color: var(--primary-color);
         }
-        paper-button.disarm {
+        mwc-button.disarm {
           color: var(--google-red-500);
         }
       </style>
@@ -51,87 +51,87 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
         <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
           <div class="pad">
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="1"
                 raised
-                >1</paper-button
+                >1</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="4"
                 raised
-                >4</paper-button
+                >4</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="7"
                 raised
-                >7</paper-button
+                >7</mwc-button
               >
             </div>
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="2"
                 raised
-                >2</paper-button
+                >2</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="5"
                 raised
-                >5</paper-button
+                >5</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="8"
                 raised
-                >8</paper-button
+                >8</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="0"
                 raised
-                >0</paper-button
+                >0</mwc-button
               >
             </div>
             <div>
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="3"
                 raised
-                >3</paper-button
+                >3</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="6"
                 raised
-                >6</paper-button
+                >6</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_digitClicked"
                 disabled="[[!_inputEnabled]]"
                 data-digit="9"
                 raised
-                >9</paper-button
+                >9</mwc-button
               >
-              <paper-button
+              <mwc-button
                 on-click="_clearEnteredCode"
                 disabled="[[!_inputEnabled]]"
                 raised
               >
                 [[localize('ui.card.alarm_control_panel.clear_code')]]
-              </paper-button>
+              </mwc-button>
             </div>
           </div>
         </template>
@@ -139,7 +139,7 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
 
       <div class="layout horizontal center-justified actions">
         <template is="dom-if" if="[[_disarmVisible]]">
-          <paper-button
+          <mwc-button
             raised
             class="disarm"
             on-click="_callService"
@@ -147,25 +147,25 @@ class MoreInfoAlarmControlPanel extends LocalizeMixin(
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.disarm')]]
-          </paper-button>
+          </mwc-button>
         </template>
         <template is="dom-if" if="[[_armVisible]]">
-          <paper-button
+          <mwc-button
             raised
             on-click="_callService"
             data-service="alarm_arm_home"
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.arm_home')]]
-          </paper-button>
+          </mwc-button>
-          <paper-button
+          <mwc-button
             raised
             on-click="_callService"
             data-service="alarm_arm_away"
             disabled="[[!_codeValid]]"
           >
             [[localize('ui.card.alarm_control_panel.arm_away')]]
-          </paper-button>
+          </mwc-button>
         </template>
       </div>
     `;

src/dialogs/more-info/controls/more-info-automation.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -10,7 +10,7 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -33,9 +33,9 @@ class MoreInfoAutomation extends LocalizeMixin(PolymerElement) {
       </div>
 
       <div class="actions">
-        <paper-button on-click="handleTriggerTapped">
+        <mwc-button on-click="handleTriggerTapped">
           [[localize('ui.card.automation.trigger')]]
-        </paper-button>
+        </mwc-button>
       </div>
     `;
   }

src/dialogs/more-info/controls/more-info-configurator.js

@@ -1,6 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -69,7 +69,7 @@ class MoreInfoConfigurator extends PolymerElement {
           </template>
 
           <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
-            <paper-button
+            <mwc-button
               raised=""
               disabled="[[isConfiguring]]"
               on-click="submitClicked"
@@ -80,7 +80,7 @@ class MoreInfoConfigurator extends PolymerElement {
                 alt="Configuring"
               ></paper-spinner>
               [[stateObj.attributes.submit_caption]]
-            </paper-button>
+            </mwc-button>
           </p>
         </template>
       </div>

src/dialogs/more-info/controls/more-info-lock.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -26,17 +26,17 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
           pattern="[[stateObj.attributes.code_format]]"
           type="password"
         ></paper-input>
-        <paper-button
+        <mwc-button
           on-click="callService"
           data-service="unlock"
           hidden$="[[!isLocked]]"
-          >[[localize('ui.card.lock.unlock')]]</paper-button
+          >[[localize('ui.card.lock.unlock')]]</mwc-button
         >
-        <paper-button
+        <mwc-button
           on-click="callService"
           data-service="lock"
           hidden$="[[isLocked]]"
-          >[[localize('ui.card.lock.lock')]]</paper-button
+          >[[localize('ui.card.lock.lock')]]</mwc-button
         >
       </template>
       <ha-attributes

src/dialogs/more-info/more-info-settings.js

@@ -1,5 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -33,7 +33,7 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
           @apply --ha-more-info-app-toolbar-title;
         }
 
-        app-toolbar paper-button {
+        app-toolbar mwc-button {
           font-size: 0.8em;
           margin: 0;
         }
@@ -49,8 +49,8 @@ class MoreInfoSettings extends LocalizeMixin(EventsMixin(PolymerElement)) {
           on-click="_backTapped"
         ></paper-icon-button>
         <div main-title="">[[_computeStateName(stateObj)]]</div>
-        <paper-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
+        <mwc-button on-click="_save" disabled="[[_computeInvalid(_entityId)]]"
-          >[[localize('ui.dialogs.more_info_settings.save')]]</paper-button
+          >[[localize('ui.dialogs.more_info_settings.save')]]</mwc-button
         >
       </app-toolbar>
 

src/layouts/ha-init-page.ts

@@ -1,5 +1,5 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import {
   LitElement,
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
         ${this.error
           ? html`
               Unable to connect to Home Assistant.
-              <paper-button @click=${this._retry}>Retry</paper-button>
+              <mwc-button @click=${this._retry}>Retry</mwc-button>
             `
           : "Loading data"}
       </div>
@@ -51,10 +51,6 @@ class HaInitPage extends LitElement {
       paper-spinner-lite {
         margin-bottom: 10px;
       }
-      paper-button {
-        font-weight: 500;
-        color: var(--primary-color);
-      }
     `;
   }
 }

src/layouts/hass-error-screen.ts

@@ -7,6 +7,7 @@ import {
   property,
   customElement,
 } from "lit-element";
+import "@material/mwc-button";
 import "./hass-subpage";
 
 @customElement("hass-error-screen")
@@ -20,7 +21,7 @@ class HassErrorScreen extends LitElement {
         <div class="content">
           <h3>${this.error}</h3>
           <slot>
-            <paper-button @click=${this._backTapped}>go back</paper-button>
+            <mwc-button @click=${this._backTapped}>go back</mwc-button>
           </slot>
         </div>
       </hass-subpage>
@@ -41,11 +42,6 @@ class HassErrorScreen extends LitElement {
           justify-content: center;
           flex-direction: column;
         }
-
-        paper-button {
-          font-weight: bold;
-          color: var(--primary-color);
-        }
       `,
     ];
   }

src/onboarding/ha-onboarding.js

@@ -1,7 +1,7 @@
 import "@polymer/polymer/lib/elements/dom-if";
 import "@polymer/polymer/lib/elements/dom-repeat";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { localizeLiteMixin } from "../mixins/localize-lite-mixin";
@@ -64,9 +64,9 @@ class HaOnboarding extends localizeLiteMixin(PolymerElement) {
 
       <template is='dom-if' if='[[!_loading]]'>
         <p class='action'>
-          <paper-button raised on-click='_submitForm'>
+          <mwc-button raised on-click='_submitForm'>
             [[localize('ui.panel.page-onboarding.user.create_account')]]
-          </paper-button>
+          </mwc-button>
         </p>
       </template>
     </div>

src/panels/config/area_registry/dialog-area-registry-detail.ts

@@ -77,18 +77,18 @@ class DialogAreaDetail extends LitElement {
         <div class="paper-dialog-buttons">
           ${this._params.entry
             ? html`
-                <paper-button
+                <mwc-button
-                  class="danger"
+                  class="warning"
                   @click="${this._deleteEntry}"
                   .disabled=${this._submitting}
                 >
                   ${this.hass.localize(
                     "ui.panel.config.area_registry.editor.delete"
                   )}
-                </paper-button>
+                </mwc-button>
               `
             : html``}
-          <paper-button
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${nameInvalid || this._submitting}
           >
@@ -99,7 +99,7 @@ class DialogAreaDetail extends LitElement {
               : this.hass.localize(
                   "ui.panel.config.area_registry.editor.create"
                 )}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -156,13 +156,7 @@ class DialogAreaDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
+        mwc-button.warning {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
           margin-right: auto;
         }
         .error {

src/panels/config/area_registry/ha-config-area-registry.ts

@@ -79,11 +79,11 @@ class HaConfigAreaRegistry extends LitElement {
                     ${this.hass.localize(
                       "ui.panel.config.area_registry.picker.no_areas"
                     )}
-                    <paper-button @click=${this._createArea}>
+                    <mwc-button @click=${this._createArea}>
                       ${this.hass.localize(
                         "ui.panel.config.area_registry.picker.create_area"
                       )}
-                    </paper-button>
+                    </mwc-button>
                   </div>
                 `
               : html``}

src/panels/config/automation/ha-automation-editor.ts

@@ -242,7 +242,7 @@ class HaAutomationEditor extends LitElement {
         .script paper-card {
           margin-top: 16px;
         }
-        .add-card paper-button {
+        .add-card mwc-button {
           display: block;
           text-align: center;
         }

src/panels/config/cloud/cloud-alexa-pref.ts

@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line

src/panels/config/cloud/cloud-google-pref.ts

@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-toggle-button/paper-toggle-button";
 // tslint:disable-next-line

src/panels/config/cloud/cloud-webhook-manage-dialog.ts

@@ -6,7 +6,7 @@ import {
   CSSResult,
 } from "lit-element";
 
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
@@ -69,9 +69,9 @@ export class CloudWebhookManageDialog extends LitElement {
 
         <div class="paper-dialog-buttons">
           <a href="${docsUrl}" target="_blank"
-            ><paper-button>VIEW DOCUMENTATION</paper-button></a
+            ><mwc-button>VIEW DOCUMENTATION</mwc-button></a
           >
-          <paper-button @click="${this._closeDialog}">CLOSE</paper-button>
+          <mwc-button @click="${this._closeDialog}">CLOSE</mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -129,7 +129,7 @@ export class CloudWebhookManageDialog extends LitElement {
         button.link {
           color: var(--primary-color);
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }

src/panels/config/cloud/cloud-webhooks.ts

@@ -122,8 +122,8 @@ export class CloudWebhooks extends LitElement {
               `
             : this._cloudHooks![entry.webhook_id]
             ? html`
-                <paper-button @click="${this._handleManageButton}"
+                <mwc-button @click="${this._handleManageButton}"
-                  >Manage</paper-button
+                  >Manage</mwc-button
                 >
               `
             : html`
@@ -226,7 +226,7 @@ export class CloudWebhooks extends LitElement {
           flex-direction: column;
           justify-content: center;
         }
-        paper-button {
+        mwc-button {
           font-weight: 500;
           color: var(--primary-color);
         }

src/panels/config/cloud/ha-config-cloud-account.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-toggle-button/paper-toggle-button";
@@ -48,7 +48,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           display: flex;
           padding: 0 16px;
         }
-        paper-button {
+        mwc-button {
           align-self: center;
         }
         .soon {
@@ -66,7 +66,7 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
           text-transform: capitalize;
           padding: 16px;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -100,10 +100,10 @@ class HaConfigCloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
               <div class="card-actions">
                 <a href="https://account.nabucasa.com" target="_blank"
-                  ><paper-button>Manage Account</paper-button></a
+                  ><mwc-button>Manage Account</mwc-button></a
                 >
-                <paper-button style="float: right" on-click="handleLogout"
+                <mwc-button style="float: right" on-click="handleLogout"
-                  >Sign out</paper-button
+                  >Sign out</mwc-button
                 >
               </div>
             </paper-card>

src/panels/config/cloud/ha-config-cloud-login.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-input/paper-input";

src/panels/config/config-entries/ha-config-entries-dashboard.js

@@ -1,6 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/iron-icon/iron-icon";
 import "@polymer/paper-item/paper-item";
@@ -29,7 +29,7 @@ class HaConfigManagerDashboard extends LocalizeMixin(
   static get template() {
     return html`
       <style include="iron-flex ha-style">
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -65,8 +65,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                   <paper-item-body>
                     [[_computeIntegrationTitle(localize, item.handler)]]
                   </paper-item-body>
-                  <paper-button on-click="_continueFlow"
+                  <mwc-button on-click="_continueFlow"
-                    >[[localize('ui.panel.config.integrations.configure')]]</paper-button
+                    >[[localize('ui.panel.config.integrations.configure')]]</mwc-button
                   >
                 </div>
               </template>
@@ -128,8 +128,8 @@ class HaConfigManagerDashboard extends LocalizeMixin(
                 <paper-item-body>
                   [[_computeIntegrationTitle(localize, item)]]
                 </paper-item-body>
-                <paper-button on-click="_createFlow"
+                <mwc-button on-click="_createFlow"
-                  >[[localize('ui.panel.config.integrations.configure')]]</paper-button
+                  >[[localize('ui.panel.config.integrations.configure')]]</mwc-button
                 >
               </div>
             </template>

src/panels/config/config-entries/ha-config-flow.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -102,10 +102,10 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </paper-dialog-scrollable>
         <div class="buttons">
           <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-            <paper-button on-click="_flowDone">Close</paper-button>
+            <mwc-button on-click="_flowDone">Close</mwc-button>
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-            <paper-button on-click="_flowDone">Close</paper-button>
+            <mwc-button on-click="_flowDone">Close</mwc-button>
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
             <template is="dom-if" if="[[_loading]]">
@@ -115,8 +115,8 @@ class HaConfigFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
             </template>
             <template is="dom-if" if="[[!_loading]]">
               <div>
-                <paper-button on-click="_submitStep" disabled="[[!_canSubmit]]"
+                <mwc-button on-click="_submitStep" disabled="[[!_canSubmit]]"
-                  >Submit</paper-button
+                  >Submit</mwc-button
                 >
                 <template is="dom-if" if="[[!_canSubmit]]">
                   <paper-tooltip position="left">

src/panels/config/core/ha-config-section-core.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -40,7 +40,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
           font-weight: 500;
         }
 
-        .config-invalid paper-button {
+        .config-invalid mwc-button {
           float: right;
         }
 
@@ -70,9 +70,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
                       [[localize('ui.panel.config.core.section.core.validation.valid')]]
                     </div>
                   </template>
-                  <paper-button raised="" on-click="validateConfig">
+                  <mwc-button raised="" on-click="validateConfig">
                     [[localize('ui.panel.config.core.section.core.validation.check_config')]]
-                  </paper-button>
+                  </mwc-button>
                 </template>
                 <template is="dom-if" if="[[validating]]">
                   <paper-spinner active=""></paper-spinner>
@@ -84,9 +84,9 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
                 <span class="text">
                   [[localize('ui.panel.config.core.section.core.validation.invalid')]]
                 </span>
-                <paper-button raised="" on-click="validateConfig">
+                <mwc-button raised="" on-click="validateConfig">
                   [[localize('ui.panel.config.core.section.core.validation.check_config')]]
-                </paper-button>
+                </mwc-button>
               </div>
               <div id="configLog" class="validate-log">[[validateLog]]</div>
             </template>

src/panels/config/entity_registry/dialog-entity-registry-detail.ts

@@ -98,23 +98,23 @@ class DialogEntityRegistryDetail extends LitElement {
           </div>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button
+          <mwc-button
-            class="danger"
+            class="warning"
             @click="${this._deleteEntry}"
             .disabled=${this._submitting}
           >
             ${this.hass.localize(
               "ui.panel.config.entity_registry.editor.delete"
             )}
-          </paper-button>
+          </mwc-button>
-          <paper-button
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${invalidDomainUpdate || this._submitting}
           >
             ${this.hass.localize(
               "ui.panel.config.entity_registry.editor.update"
             )}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -172,13 +172,7 @@ class DialogEntityRegistryDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
+        mwc-button.warning {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
           margin-right: auto;
         }
         .error {

src/panels/config/ha-entity-config.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -75,17 +75,17 @@ class HaEntityConfig extends PolymerElement {
           </div>
         </div>
         <div class="card-actions">
-          <paper-button
+          <mwc-button
             on-click="saveEntity"
             disabled="[[computeShowPlaceholder(formState)]]"
-            >SAVE</paper-button
+            >SAVE</mwc-button
           >
           <template is="dom-if" if="[[allowDelete]]">
-            <paper-button
+            <mwc-button
               class="warning"
               on-click="deleteEntity"
               disabled="[[computeShowPlaceholder(formState)]]"
-              >DELETE</paper-button
+              >DELETE</mwc-button
             >
           </template>
         </div>

src/panels/config/js/condition/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import ConditionRow from "./condition_row";
 
@@ -46,9 +46,9 @@ export default class Condition extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addCondition}>
+            <mwc-button onTap={this.addCondition}>
               {localize("ui.panel.config.automation.editor.conditions.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>

src/panels/config/js/script/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import ActionRow from "./action_row";
 
@@ -46,9 +46,9 @@ export default class Script extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addAction}>
+            <mwc-button onTap={this.addAction}>
               {localize("ui.panel.config.automation.editor.actions.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>

src/panels/config/js/trigger/index.js

@@ -1,6 +1,6 @@
 import { h, Component } from "preact";
 import "@polymer/paper-card/paper-card";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import TriggerRow from "./trigger_row";
 import StateTrigger from "./state";
@@ -47,9 +47,9 @@ export default class Trigger extends Component {
         ))}
         <paper-card>
           <div class="card-actions add-card">
-            <paper-button onTap={this.addTrigger}>
+            <mwc-button onTap={this.addTrigger}>
               {localize("ui.panel.config.automation.editor.triggers.add")}
-            </paper-button>
+            </mwc-button>
           </div>
         </paper-card>
       </div>

src/panels/config/person/dialog-person-detail.ts

@@ -83,21 +83,21 @@ class DialogPersonDetail extends LitElement {
         <div class="paper-dialog-buttons">
           ${this._params.entry
             ? html`
-                <paper-button
+                <mwc-button
-                  class="danger"
+                  class="warning"
                   @click="${this._deleteEntry}"
                   .disabled=${this._submitting}
                 >
                   DELETE
-                </paper-button>
+                </mwc-button>
               `
             : html``}
-          <paper-button
+          <mwc-button
             @click="${this._updateEntry}"
             .disabled=${nameInvalid || this._submitting}
           >
             ${this._params.entry ? "UPDATE" : "CREATE"}
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-dialog>
     `;
@@ -162,13 +162,7 @@ class DialogPersonDetail extends LitElement {
         .form {
           padding-bottom: 24px;
         }
-        paper-button {
+        mwc-button.warning {
-          font-weight: 500;
-        }
-        paper-button.danger {
-          font-weight: 500;
-          color: var(--google-red-500);
-          margin-left: -12px;
           margin-right: auto;
         }
         .error {

src/panels/config/person/ha-config-person.ts

@@ -82,8 +82,8 @@ class HaConfigPerson extends LitElement {
               ? html`
                   <div class="empty">
                     Looks like you have no people yet!
-                    <paper-button @click=${this._createPerson}>
+                    <mwc-button @click=${this._createPerson}>
-                      CREATE PERSON</paper-button
+                      CREATE PERSON</mwc-button
                     >
                   </div>
                 `

src/panels/config/script/ha-script-editor.js

@@ -47,7 +47,7 @@ class HaScriptEditor extends LocalizeMixin(NavigateMixin(PolymerElement)) {
         .script paper-card {
           margin-top: 16px;
         }
-        .add-card paper-button {
+        .add-card mwc-button {
           display: block;
           text-align: center;
         }

src/panels/config/users/ha-dialog-add-user.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -71,7 +71,7 @@ class HaDialogAddUser extends LocalizeMixin(PolymerElement) {
             </div>
           </template>
           <template is="dom-if" if="[[!_loading]]">
-            <paper-button on-click="_createUser">Create</paper-button>
+            <mwc-button on-click="_createUser">Create</mwc-button>
           </template>
         </div>
       </paper-dialog>

src/panels/config/users/ha-user-editor.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -18,7 +18,7 @@ class HaUserEditor extends EventsMixin(
 ) {
   static get template() {
     return html`
-      <style>
+      <style include="ha-style">
         paper-card {
           display: block;
           max-width: 600px;
@@ -58,12 +58,13 @@ class HaUserEditor extends EventsMixin(
         </paper-card>
         <paper-card>
           <div class="card-actions">
-            <paper-button
+            <mwc-button
+              class="warning"
               on-click="_deleteUser"
               disabled="[[user.system_generated]]"
             >
               [[localize('ui.panel.config.users.editor.delete_user')]]
-            </paper-button>
+            </mwc-button>
             <template is="dom-if" if="[[user.system_generated]]">
               Unable to remove system generated users.
             </template>

src/panels/config/zha/zha-cluster-attributes.ts

@@ -7,7 +7,7 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
@@ -145,8 +145,8 @@ export class ZHAClusterAttributes extends LitElement {
         ></paper-input>
       </div>
       <div class="card-actions">
-        <paper-button @click="${this._onGetZigbeeAttributeClick}"
+        <mwc-button @click="${this._onGetZigbeeAttributeClick}"
-          >Get Zigbee Attribute</paper-button
+          >Get Zigbee Attribute</mwc-button
         >
         <ha-call-service-button
           .hass="${this.hass}"

src/panels/config/zha/zha-network.ts

@@ -6,7 +6,7 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";

src/panels/config/zha/zha-node.ts

@@ -7,7 +7,7 @@ import {
   PropertyValues,
   css,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
@@ -142,8 +142,8 @@ export class ZHANode extends LitElement {
   private _renderNodeActions(): TemplateResult {
     return html`
       <div class="card-actions">
-        <paper-button @click="${this._onReconfigureNodeClick}"
+        <mwc-button @click="${this._onReconfigureNodeClick}"
-          >Reconfigure Node</paper-button
+          >Reconfigure Node</mwc-button
         >
         ${this._showHelp
           ? html`

src/panels/config/zwave/ha-config-zwave.js

@@ -236,8 +236,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                   hidden$="[[!showHelp]]"
                 >
                 </ha-service-description>
-                <paper-button on-click="_nodeMoreInfo"
+                <mwc-button on-click="_nodeMoreInfo"
-                  >Node Information</paper-button
+                  >Node Information</mwc-button
                 >
               </div>
 
@@ -277,8 +277,8 @@ class HaConfigZwave extends LocalizeMixin(EventsMixin(PolymerElement)) {
                     hidden$="[[!showHelp]]"
                   >
                   </ha-service-description>
-                  <paper-button on-click="_entityMoreInfo"
+                  <mwc-button on-click="_entityMoreInfo"
-                    >Entity Information</paper-button
+                    >Entity Information</mwc-button
                   >
                 </div>
                 <div class="form-group">

src/panels/config/zwave/zwave-log.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
@@ -42,8 +42,8 @@ class OzwLog extends EventsMixin(PolymerElement) {
           </paper-input>
         </div>
         <div class="card-actions">
-          <paper-button raised="true" on-click="_openLogWindow">Load</paper-button>
+          <mwc-button raised="true" on-click="_openLogWindow">Load</mwc-button>
-          <paper-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</paper-button>
+          <mwc-button raised="true" on-click="_tailLog" disabled="{{_completeLog}}">Tail</mwc-button>
       </paper-card>
     </ha-config-section>
 `;

src/panels/dev-event/ha-panel-dev-event.js

@@ -2,7 +2,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -68,9 +68,7 @@ class HaPanelDevEvent extends EventsMixin(PolymerElement) {
                 label="Event Data (JSON, optional)"
                 value="{{eventData}}"
               ></paper-textarea>
-              <paper-button on-click="fireEvent" raised
+              <mwc-button on-click="fireEvent" raised>Fire Event</mwc-button>
-                >Fire Event</paper-button
-              >
             </div>
           </div>
 

src/panels/dev-info/error-log-card.ts

@@ -7,7 +7,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../types";
 import { fetchErrorLog } from "../../data/error_log";
@@ -34,9 +34,9 @@ class ErrorLogCard extends LitElement {
               ></paper-icon-button>
             `
           : html`
-              <paper-button raised @click=${this._refreshErrorLog}>
+              <mwc-button raised @click=${this._refreshErrorLog}>
                 Load Full Home Assistant Log
-              </paper-button>
+              </mwc-button>
             `}
       </p>
       <div class="error-log">${this._errorLog}</div>

src/panels/dev-info/ha-panel-dev-info.ts

@@ -138,9 +138,9 @@ class HaPanelDevInfo extends LitElement {
             </p>
             <p>
               <a href="${nonDefaultLink}">${nonDefaultLinkText}</a><br />
-              <paper-button @click="${this._toggleDefaultPage}" raised>
+              <mwc-button @click="${this._toggleDefaultPage}" raised>
                 ${defaultPageText}
-              </paper-button>
+              </mwc-button>
             </p>
           </div>
           <system-health-card .hass=${this.hass}></system-health-card>

src/panels/dev-mqtt/ha-panel-dev-mqtt.js

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
@@ -33,7 +33,7 @@ class HaPanelDevMqtt extends PolymerElement {
           display: block;
         }
 
-        paper-button {
+        mwc-button {
           background-color: white;
         }
       </style>
@@ -69,7 +69,7 @@ class HaPanelDevMqtt extends PolymerElement {
               ></paper-textarea>
             </div>
             <div class="card-actions">
-              <paper-button on-click="_publish">Publish</paper-button>
+              <mwc-button on-click="_publish">Publish</mwc-button>
             </div>
           </paper-card>
         </div>

src/panels/dev-service/ha-panel-dev-service.js

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-input/paper-textarea";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -131,11 +131,8 @@ class HaPanelDevService extends PolymerElement {
               autocomplete="off"
               spellcheck="false"
             ></paper-textarea>
-            <paper-button
+            <mwc-button on-click="_callService" raised disabled="[[!validJSON]]"
-              on-click="_callService"
+              >Call Service</mwc-button
-              raised
-              disabled="[[!validJSON]]"
-              >Call Service</paper-button
             >
             <template is="dom-if" if="[[!validJSON]]">
               <span class="error">Invalid JSON</span>

src/panels/dev-state/ha-panel-dev-state.js

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
@@ -111,9 +111,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
               spellcheck="false"
               value="{{_stateAttributes}}"
             ></paper-textarea>
-            <paper-button on-click="handleSetState" raised
+            <mwc-button on-click="handleSetState" raised>Set State</mwc-button>
-              >Set State</paper-button
-            >
           </div>
 
           <h1>Current entities</h1>

src/panels/lovelace/cards/hui-alarm-panel-card.ts

@@ -130,12 +130,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
             : ["disarm"]
           ).map((state) => {
             return html`
-              <paper-button
+              <mwc-button .action="${state}" @click="${this._handleActionClick}"
-                noink
+                >${this._label(state)}</mwc-button
-                raised
-                .action="${state}"
-                @click="${this._handleActionClick}"
-                >${this._label(state)}</paper-button
               >
             `;
           })}
@@ -156,17 +152,17 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
                 ${BUTTONS.map((value) => {
                   return value === ""
                     ? html`
-                        <paper-button disabled></paper-button>
+                        <mwc-button disabled></mwc-button>
                       `
                     : html`
-                        <paper-button
+                        <mwc-button
                           noink
                           raised
                           .value="${value}"
                           @click="${this._handlePadClick}"
                           >${value === "clear"
                             ? this._label("clear_code")
-                            : value}</paper-button
+                            : value}</mwc-button
                         >
                       `;
                 })}
@@ -275,7 +271,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           margin: auto;
           width: 300px;
         }
-        #keypad paper-button {
+        #keypad mwc-button {
           margin-bottom: 5%;
           width: 30%;
           padding: calc(var(--base-unit));
@@ -289,11 +285,11 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
           justify-content: center;
           font-size: calc(var(--base-unit) * 1);
         }
-        .actions paper-button {
+        .actions mwc-button {
           min-width: calc(var(--base-unit) * 9);
           color: var(--primary-color);
         }
-        paper-button#disarm {
+        mwc-button#disarm {
           color: var(--google-red-500);
         }
       `,

src/panels/lovelace/cards/hui-empty-state-card.ts

@@ -53,11 +53,11 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
         </div>
         <div class="card-actions">
           <a href="/config/integrations">
-            <paper-button>
+            <mwc-button>
               ${this.hass.localize(
                 "ui.panel.lovelace.cards.empty_state.go_to_integrations_page"
               )}
-            </paper-button>
+            </mwc-button>
           </a>
         </div>
       </paper-card>
@@ -71,7 +71,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
         padding: 16px;
       }
 
-      paper-button {
+      mwc-button {
         margin-left: -8px;
         font-weight: 500;
         color: var(--primary-color);

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -4,9 +4,12 @@ import {
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import { HassEntity } from "home-assistant-js-websocket";
 import { styleMap } from "lit-html/directives/style-map";
+import "@material/mwc-ripple";
 
 import "../../../components/ha-card";
 
@@ -86,22 +89,20 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     }
     const stateObj = this.hass.states[this._config.entity];
 
+    if (!stateObj) {
+      return html`
+        <div class="not-found">
+          Entity not available: ${this._config.entity}
+        </div>
+      `;
+    }
+
     return html`
-      ${this.renderStyle()}
       <ha-card
         @ha-click="${this._handleTap}"
         @ha-hold="${this._handleHold}"
         .longPress="${longPress()}"
       >
-        ${!stateObj
-          ? html`
-              <div class="not-found">
-                Entity not available: ${this._config.entity}
-              </div>
-            `
-          : html`
-              <paper-button>
-                <div>
         <ha-icon
           data-domain="${computeStateDomain(stateObj)}"
           data-state="${stateObj.state}"
@@ -114,9 +115,7 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
         <span>
           ${this._config.name || computeStateName(stateObj)}
         </span>
-                </div>
+        <mwc-ripple></mwc-ripple>
-              </paper-button>
-            `}
       </ha-card>
     `;
   }
@@ -132,14 +131,19 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
     }
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      ha-card {
-        ha-icon {
+        cursor: pointer;
         display: flex;
-          margin: auto;
+        flex-direction: column;
+        align-items: center;
+        padding: 4% 0;
+        font-size: 1.2rem;
+      }
+      ha-icon {
         width: 40%;
-          height: 40%;
+        height: auto;
         color: var(--paper-item-icon-color, #44739e);
       }
       ha-icon[data-domain="light"][data-state="on"],
@@ -152,23 +156,11 @@ class HuiEntityButtonCard extends LitElement implements LovelaceCard {
       ha-icon[data-state="unavailable"] {
         color: var(--state-icon-unavailable-color);
       }
-        state-badge {
-          display: flex;
-          margin: auto;
-          width: 40%;
-          height: 40%;
-        }
-        paper-button {
-          display: flex;
-          margin: auto;
-          text-align: center;
-        }
       .not-found {
         flex: 1;
         background-color: yellow;
         padding: 8px;
       }
-      </style>
     `;
   }
 

src/panels/lovelace/components/hui-card-options.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyDeclarations } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-listbox/paper-listbox";
@@ -42,7 +42,7 @@ export class HuiCardOptions extends LitElement {
           flex: 4;
           text-align: right;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
         }
@@ -69,10 +69,10 @@ export class HuiCardOptions extends LitElement {
       <slot></slot>
       <div class="options">
         <div class="primary-actions">
-          <paper-button @click="${this._editCard}"
+          <mwc-button @click="${this._editCard}"
             >${this.hass!.localize(
               "ui.panel.lovelace.editor.edit_card.edit"
-            )}</paper-button
+            )}</mwc-button
           >
         </div>
         <div class="secondary-actions">

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -4,7 +4,7 @@ import {
   PropertyDeclarations,
   TemplateResult,
 } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../../types";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";

src/panels/lovelace/components/notifications/hui-configurator-notification-item.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -23,8 +23,8 @@ export class HuiConfiguratorNotificationItem extends EventsMixin(
 
         <div>[[_getMessage(notification)]]</div>
 
-        <paper-button slot="actions" class="primary" on-click="_handleClick"
+        <mwc-button slot="actions" on-click="_handleClick"
-          >[[_localizeState(notification.state)]]</paper-button
+          >[[_localizeState(notification.state)]]</mwc-button
         >
       </hui-notification-item-template>
     `;

src/panels/lovelace/components/notifications/hui-notification-drawer.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 

src/panels/lovelace/components/notifications/hui-notification-item-template.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";

src/panels/lovelace/components/notifications/hui-notifications-button.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 

src/panels/lovelace/components/notifications/hui-persistent-notification-item.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 
@@ -49,8 +49,8 @@ export class HuiPersistentNotificationItem extends LocalizeMixin(
           </span>
         </div>
 
-        <paper-button slot="actions" class="primary" on-click="_handleDismiss"
+        <mwc-button slot="actions" on-click="_handleDismiss"
-          >[[localize('ui.card.persistent_notification.dismiss')]]</paper-button
+          >[[localize('ui.card.persistent_notification.dismiss')]]</mwc-button
         >
       </hui-notification-item-template>
     `;

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -1,5 +1,5 @@
 import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -45,12 +45,9 @@ export class HuiCardPicker extends LitElement {
       <div class="cards-container">
         ${cards.map((card) => {
           return html`
-            <paper-button
+            <mwc-button @click="${this._cardPicked}" .type="${card.type}">
-              raised
+              ${card.name}
-              @click="${this._cardPicked}"
+            </mwc-button>
-              .type="${card.type}"
-              >${card.name}</paper-button
-            >
           `;
         })}
       </div>
@@ -65,11 +62,13 @@ export class HuiCardPicker extends LitElement {
           flex-wrap: wrap;
           margin-bottom: 10px;
         }
-        .cards-container paper-button {
+        .cards-container mwc-button {
           flex: 1 0 25%;
+          margin: 4px;
         }
+
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          .cards-container paper-button {
+          .cards-container mwc-button {
             flex: 1 0 33%;
           }
         }

src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts

@@ -41,7 +41,7 @@ export class HuiDialogPickCard extends LitElement {
           ></hui-card-picker>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._skipPick}">MANUAL CARD</paper-button>
+          <mwc-button @click="${this._skipPick}">MANUAL CARD</mwc-button>
         </div>
       </paper-dialog>
     `;

src/panels/lovelace/editor/card-editor/hui-edit-card.ts

@@ -17,7 +17,7 @@ import "@polymer/paper-dialog/paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
@@ -160,7 +160,7 @@ export class HuiEditCard extends LitElement {
         ${!this._loading
           ? html`
               <div class="paper-dialog-buttons">
-                <paper-button
+                <mwc-button
                   class="toggle-button"
                   ?hidden="${!this._configValue || !this._configValue.value}"
                   ?disabled="${this._configElement === null ||
@@ -168,12 +168,12 @@ export class HuiEditCard extends LitElement {
                   @click="${this._toggleEditor}"
                   >${this.hass!.localize(
                     "ui.panel.lovelace.editor.edit_card.toggle_editor"
-                  )}</paper-button
+                  )}</mwc-button
                 >
-                <paper-button @click="${this.closeDialog}"
+                <mwc-button @click="${this.closeDialog}"
-                  >${this.hass!.localize("ui.common.cancel")}</paper-button
+                  >${this.hass!.localize("ui.common.cancel")}</mwc-button
                 >
-                <paper-button
+                <mwc-button
                   ?hidden="${!this._configValue || !this._configValue.value}"
                   ?disabled="${this._saving || this._configState !== "OK"}"
                   @click="${this._save}"
@@ -182,7 +182,7 @@ export class HuiEditCard extends LitElement {
                     ?active="${this._saving}"
                     alt="Saving"
                   ></paper-spinner>
-                  ${this.hass!.localize("ui.common.save")}</paper-button
+                  ${this.hass!.localize("ui.common.save")}</mwc-button
                 >
               </div>
             `
@@ -469,7 +469,7 @@ export class HuiEditCard extends LitElement {
         .margin-bot {
           margin-bottom: 24px;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -12,7 +12,7 @@ import "@polymer/paper-dialog/paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { haStyleDialog } from "../../../resources/ha-style";
 
@@ -65,22 +65,19 @@ export class HuiSaveConfig extends LitElement {
           </p>
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}"
+          <mwc-button @click="${this._closeDialog}"
             >${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.cancel"
-            )}</paper-button
+            )}</mwc-button
-          >
-          <paper-button
-            ?disabled="${this._saving}"
-            @click="${this._saveConfig}"
           >
+          <mwc-button ?disabled="${this._saving}" @click="${this._saveConfig}">
             <paper-spinner
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
             ${this.hass!.localize(
               "ui.panel.lovelace.editor.save_config.save"
-            )}</paper-button
+            )}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -133,7 +130,7 @@ export class HuiSaveConfig extends LitElement {
         paper-spinner[active] {
           display: block;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -11,7 +11,7 @@ import "@polymer/paper-dialog/paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
 import { haStyleDialog } from "../../../../resources/ha-style";
@@ -67,10 +67,10 @@ export class HuiDialogEditLovelace extends LitElement {
           ></hui-lovelace-editor
         ></paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <paper-button @click="${this._closeDialog}"
+          <mwc-button @click="${this._closeDialog}"
-            >${this.hass!.localize("ui.common.cancel")}</paper-button
+            >${this.hass!.localize("ui.common.cancel")}</mwc-button
           >
-          <paper-button
+          <mwc-button
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
@@ -78,7 +78,7 @@ export class HuiDialogEditLovelace extends LitElement {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.hass!.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -147,7 +147,7 @@ export class HuiDialogEditLovelace extends LitElement {
         paper-dialog {
           max-width: 650px;
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/editor/view-editor/hui-edit-view.ts

@@ -15,7 +15,7 @@ import "@polymer/paper-icon-button/paper-icon-button.js";
 // This is not a duplicate import, one is for types, one is for element.
 // tslint:disable-next-line
 import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 
 import { haStyleDialog } from "../../../../resources/ha-style";
@@ -144,10 +144,10 @@ export class HuiEditView extends LitElement {
                 ></paper-icon-button>
               `
             : ""}
-          <paper-button @click="${this._closeDialog}"
+          <mwc-button @click="${this._closeDialog}"
-            >${this.hass!.localize("ui.common.cancel")}</paper-button
+            >${this.hass!.localize("ui.common.cancel")}</mwc-button
           >
-          <paper-button
+          <mwc-button
             ?disabled="${!this._config || this._saving}"
             @click="${this._save}"
           >
@@ -155,7 +155,7 @@ export class HuiEditView extends LitElement {
               ?active="${this._saving}"
               alt="Saving"
             ></paper-spinner>
-            ${this.hass!.localize("ui.common.save")}</paper-button
+            ${this.hass!.localize("ui.common.save")}</mwc-button
           >
         </div>
       </paper-dialog>
@@ -288,7 +288,7 @@ export class HuiEditView extends LitElement {
           text-transform: uppercase;
           border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         }
-        paper-button paper-spinner {
+        mwc-button paper-spinner {
           width: 14px;
           height: 14px;
           margin-right: 20px;

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -47,11 +47,11 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
     return html`
       ${this.renderStyle()}
       <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
-        <paper-button @click="${this._callService}">
+        <mwc-button @click="${this._callService}">
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
             : this.hass!.localize("ui.card.lock.lock")}
-        </paper-button>
+        </mwc-button>
       </hui-generic-entity-row>
     `;
   }
@@ -59,7 +59,7 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;

src/panels/lovelace/entity-rows/hui-scene-entity-row.ts

@@ -56,9 +56,9 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
               ></ha-entity-toggle>
             `
           : html`
-              <paper-button @click="${this._callService}">
+              <mwc-button @click="${this._callService}">
                 ${this.hass!.localize("ui.card.scene.activate")}
-              </paper-button>
+              </mwc-button>
             `}
       </hui-generic-entity-row>
     `;
@@ -67,7 +67,7 @@ class HuiSceneEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;

src/panels/lovelace/entity-rows/hui-script-entity-row.ts

@@ -56,9 +56,9 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
               ></ha-entity-toggle>
             `
           : html`
-              <paper-button @click="${this._callService}">
+              <mwc-button @click="${this._callService}">
                 ${this.hass!.localize("ui.card.script.execute")}
-              </paper-button>
+              </mwc-button>
             `}
       </hui-generic-entity-row>
     `;
@@ -67,7 +67,7 @@ class HuiScriptEntityRow extends LitElement implements EntityRow {
   protected renderStyle(): TemplateResult {
     return html`
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;

src/panels/lovelace/ha-panel-lovelace.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { fetchConfig, LovelaceConfig, saveConfig } from "../../data/lovelace";
 import "../../layouts/hass-loading-screen";
@@ -74,7 +74,7 @@ class LovelacePanel extends LitElement {
     if (state === "error") {
       return html`
         <style>
-          paper-button {
+          mwc-button {
             color: var(--primary-color);
             font-weight: 500;
           }
@@ -85,9 +85,7 @@ class LovelacePanel extends LitElement {
           .narrow="${this.narrow}"
           .showMenu="${this.showMenu}"
         >
-          <paper-button on-click="_forceFetchConfig"
+          <mwc-button on-click="_forceFetchConfig">Reload Lovelace</mwc-button>
-            >Reload Lovelace</paper-button
-          >
         </hass-error-screen>
       `;
     }

src/panels/lovelace/hui-editor.ts

@@ -5,7 +5,7 @@ import yaml from "js-yaml";
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 
@@ -53,7 +53,7 @@ class LovelaceFullConfigEditor extends LitElement {
               @click="${this._closeEditor}"
             ></paper-icon-button>
             <div main-title>Edit Config</div>
-            <paper-button @click="${this._handleSave}">Save</paper-button>
+            <mwc-button raised @click="${this._handleSave}">Save</mwc-button>
             <ha-icon
               class="save-button
             ${classMap({
@@ -92,9 +92,7 @@ class LovelaceFullConfigEditor extends LitElement {
         app-header-layout {
           height: 100vh;
         }
-        paper-button {
+
-          font-size: 16px;
-        }
         app-toolbar {
           background-color: var(--dark-background-color, #455a64);
           color: var(--dark-text-color);
@@ -114,8 +112,8 @@ class LovelaceFullConfigEditor extends LitElement {
 
         .save-button {
           opacity: 0;
-          margin-left: -16px;
+          margin-left: -21px;
-          margin-top: -4px;
+          margin-top: -1px;
           transition: opacity 1.5s;
         }
 

src/panels/lovelace/hui-root.ts

@@ -14,7 +14,7 @@ import "@polymer/app-layout/app-scroll-effects/effects/waterfall";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/app-route/app-route";
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-menu-button/paper-menu-button";
@@ -296,14 +296,14 @@ class HUIRoot extends LitElement {
                     )}
                     ${this._editMode
                       ? html`
-                          <paper-button id="add-view" @click="${this._addView}">
+                          <paper-icon-button
-                            <ha-icon
+                            id="add-view"
+                            @click="${this._addView}"
                             title="${this.hass!.localize(
                               "ui.panel.lovelace.editor.edit_view.add"
                             )}"
                             icon="hass:plus"
-                            ></ha-icon>
+                          ></paper-icon-button>
-                          </paper-button>
                         `
                       : ""}
                   </paper-tabs>
@@ -371,7 +371,7 @@ class HUIRoot extends LitElement {
         app-toolbar a {
           color: var(--text-primary-color, white);
         }
-        paper-button.warning:not([disabled]) {
+        mwc-button.warning:not([disabled]) {
           color: var(--google-red-500);
         }
         #view {

src/panels/lovelace/special-rows/hui-call-service-row.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit-element";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import "../../../components/ha-icon";
 
@@ -36,8 +36,8 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
       <ha-icon .icon="${this._config.icon}"></ha-icon>
       <div class="flex">
         <div>${this._config.name}</div>
-        <paper-button @click="${this._callService}"
+        <mwc-button @click="${this._callService}"
-          >${this._config.action_name}</paper-button
+          >${this._config.action_name}</mwc-button
         >
       </div>
     `;
@@ -67,7 +67,7 @@ class HuiCallServiceRow extends LitElement implements EntityRow {
           overflow: hidden;
           text-overflow: ellipsis;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;

src/panels/mailbox/ha-dialog-show-audio-message.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";

src/panels/mailbox/ha-panel-mailbox.js

@@ -1,7 +1,7 @@
 import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item-body";

src/panels/profile/ha-change-password-card.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-card/paper-card";
@@ -78,8 +78,8 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
               <div><paper-spinner active></paper-spinner></div>
             </template>
             <template is="dom-if" if="[[!_loading]]">
-              <paper-button on-click="_changePassword"
+              <mwc-button on-click="_changePassword"
-                >[[localize('ui.panel.profile.change_password.submit')]]</paper-button
+                >[[localize('ui.panel.profile.change_password.submit')]]</mwc-button
               >
             </template>
           </div>

src/panels/profile/ha-long-lived-access-tokens-card.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -61,9 +61,9 @@ class HaLongLivedTokens extends LocalizeMixin(EventsMixin(PolymerElement)) {
           </ha-settings-row>
         </template>
         <div class="card-actions">
-          <paper-button on-click="_handleCreate">
+          <mwc-button on-click="_handleCreate">
             [[localize('ui.panel.profile.long_lived_access_tokens.create')]]
-          </paper-button>
+          </mwc-button>
         </div>
       </paper-card>
     `;

src/panels/profile/ha-mfa-module-setup-flow.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-spinner/paper-spinner";
@@ -107,13 +107,13 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </paper-dialog-scrollable>
         <div class="buttons">
           <template is="dom-if" if="[[_equals(_step.type, 'abort')]]">
-            <paper-button on-click="_flowDone"
+            <mwc-button on-click="_flowDone"
-              >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
+              >[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
             >
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'create_entry')]]">
-            <paper-button on-click="_flowDone"
+            <mwc-button on-click="_flowDone"
-              >[[localize('ui.panel.profile.mfa_setup.close')]]</paper-button
+              >[[localize('ui.panel.profile.mfa_setup.close')]]</mwc-button
             >
           </template>
           <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
@@ -123,8 +123,8 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
               </div>
             </template>
             <template is="dom-if" if="[[!_loading]]">
-              <paper-button on-click="_submitStep"
+              <mwc-button on-click="_submitStep"
-                >[[localize('ui.panel.profile.mfa_setup.submit')]]</paper-button
+                >[[localize('ui.panel.profile.mfa_setup.submit')]]</mwc-button
               >
             </template>
           </template>

src/panels/profile/ha-mfa-modules-card.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
@@ -36,7 +36,7 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
           max-width: 600px;
           margin: 16px auto;
         }
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           margin-right: -0.57em;
@@ -50,13 +50,13 @@ class HaMfaModulesCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
               <div secondary="">[[module.id]]</div>
             </paper-item-body>
             <template is="dom-if" if="[[module.enabled]]">
-              <paper-button on-click="_disable"
+              <mwc-button on-click="_disable"
-                >[[localize('ui.panel.profile.mfa.disable')]]</paper-button
+                >[[localize('ui.panel.profile.mfa.disable')]]</mwc-button
               >
             </template>
             <template is="dom-if" if="[[!module.enabled]]">
-              <paper-button on-click="_enable"
+              <mwc-button on-click="_enable"
-                >[[localize('ui.panel.profile.mfa.enable')]]</paper-button
+                >[[localize('ui.panel.profile.mfa.enable')]]</mwc-button
               >
             </template>
           </paper-item>

src/panels/profile/ha-panel-profile.js

@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -86,8 +86,8 @@ class HaPanelProfile extends EventsMixin(LocalizeMixin(PolymerElement)) {
             ></ha-push-notifications-row>
 
             <div class="card-actions">
-              <paper-button class="warning" on-click="_handleLogOut"
+              <mwc-button class="warning" on-click="_handleLogOut"
-                >[[localize('ui.panel.profile.logout')]]</paper-button
+                >[[localize('ui.panel.profile.logout')]]</mwc-button
               >
             </div>
           </paper-card>

src/resources/ha-style.ts

@@ -43,23 +43,8 @@ export const haStyle = css`
     text-decoration: none;
   }
 
-  .card-actions paper-button:not([disabled]),
+  .card-actions .warning {
-  .card-actions ha-progress-button:not([disabled]),
+    --mdc-theme-primary: var(--google-red-500);
-  .card-actions ha-call-api-button:not([disabled]),
-  .card-actions ha-call-service-button:not([disabled]) {
-    color: var(--primary-color);
-    font-weight: 500;
-  }
-
-  .card-actions paper-button.warning:not([disabled]),
-  .card-actions ha-call-api-button.warning:not([disabled]),
-  .card-actions ha-call-service-button.warning:not([disabled]) {
-    color: var(--google-red-500);
-  }
-
-  .card-actions paper-button[primary] {
-    background-color: var(--primary-color);
-    color: var(--text-primary-color);
   }
 `;
 
@@ -78,6 +63,16 @@ export const haStyleDialog = css`
     }
   }
 
+  .paper-dialog-buttons {
+    height: 56px;
+    align-items: flex-end;
+    padding: 8px;
+  }
+
+  .paper-dialog-buttons .warning {
+    --mdc-theme-primary: var(--google-red-500);
+  }
+
   @media all and (max-width: 450px), all and (max-height: 500px) {
     paper-dialog {
       margin: 0;
@@ -213,6 +208,9 @@ documentContainer.innerHTML = `<custom-style>
       --paper-slider-secondary-color: var(--slider-secondary-color);
       --paper-slider-container-color: var(--slider-bar-color);
       --ha-paper-slider-pin-font-size: 15px;
+
+      /* mwc */
+      --mdc-theme-primary: var(--primary-color);
     }
   </style>
 

src/state-summary/state-card-configurator.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -15,7 +15,7 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -26,8 +26,8 @@ class StateCardConfigurator extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button hidden$="[[inDialog]]"
+        <mwc-button hidden$="[[inDialog]]"
-          >[[_localizeState(stateObj.state)]]</paper-button
+          >[[_localizeState(stateObj.state)]]</mwc-button
         >
       </div>
 

src/state-summary/state-card-lock.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -15,7 +15,7 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -26,17 +26,17 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button
+        <mwc-button
           on-click="_callService"
           data-service="unlock"
           hidden$="[[!isLocked]]"
-          >[[localize('ui.card.lock.unlock')]]</paper-button
+          >[[localize('ui.card.lock.unlock')]]</mwc-button
         >
-        <paper-button
+        <mwc-button
           on-click="_callService"
           data-service="lock"
           hidden$="[[isLocked]]"
-          >[[localize('ui.card.lock.lock')]]</paper-button
+          >[[localize('ui.card.lock.lock')]]</mwc-button
         >
       </div>
     `;

src/state-summary/state-card-scene.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -14,7 +14,7 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -25,8 +25,8 @@ class StateCardScene extends LocalizeMixin(PolymerElement) {
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
-        <paper-button on-click="activateScene"
+        <mwc-button on-click="activateScene"
-          >[[localize('ui.card.scene.activate')]]</paper-button
+          >[[localize('ui.card.scene.activate')]]</mwc-button
         >
       </div>
     `;

src/state-summary/state-card-script.js

@@ -1,5 +1,5 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -16,7 +16,7 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
     return html`
       <style include="iron-flex iron-flex-alignment"></style>
       <style>
-        paper-button {
+        mwc-button {
           color: var(--primary-color);
           font-weight: 500;
           top: 3px;
@@ -38,8 +38,8 @@ class StateCardScript extends LocalizeMixin(PolymerElement) {
           ></ha-entity-toggle>
         </template>
         <template is="dom-if" if="[[!stateObj.attributes.can_cancel]]">
-          <paper-button on-click="fireScript"
+          <mwc-button on-click="fireScript"
-            >[[localize('ui.card.script.execute')]]</paper-button
+            >[[localize('ui.card.script.execute')]]</mwc-button
           >
         </template>
       </div>

src/util/show-new-frontend-toast.js

@@ -1,4 +1,4 @@
-import "@polymer/paper-button/paper-button";
+import "@material/mwc-button";
 import "../components/ha-toast";
 
 export default (installingWorker) => {
@@ -7,7 +7,7 @@ export default (installingWorker) => {
   toast.text = "A new version of the frontend is available.";
   toast.duration = 0;
 
-  const button = document.createElement("paper-button");
+  const button = document.createElement("mwc-button");
   button.addEventListener("click", () =>
     installingWorker.postMessage({ type: "skipWaiting" })
   );

yarn.lock

@@ -728,6 +728,99 @@
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
+"@material/animation@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-0.40.1.tgz#c5ff31e7d7e17324a0045e889d3530b150b9fcec"
+  integrity sha512-HtxFUw04EHg4S6pXfTA3Z0wKxnNDNcDhe1Np2Y2geo+lAk2Hb7m8yCL/GaL9o2I/eRYsgUXC0U7+Mk74GCz3zw==
+
+"@material/base@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-0.40.1.tgz#a0d8e19cee98dae0f96dbf0887a14b3f7acd2aac"
+  integrity sha512-vrbOK8hONVCYgURQ9h7nkXvMdYnZVVNmAfFFijF8fbWQdwnoPcNTdqV6RoQlhBEqHYHQqLNfdUDlznAPKLclGQ==
+
+"@material/button@^0.40.0":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/button/-/button-0.40.1.tgz#b5a8657f7d3783d7fc0936f95d0187bdb0319eae"
+  integrity sha512-xLNjq9zySnpZAP4UynyeXnnlLXf3iIA/6ilecwgF4d2ooUmNXcRdlRa8wGYT36JHsCfsP3AeZOjoTZUcmaiejw==
+  dependencies:
+    "@material/elevation" "^0.40.1"
+    "@material/ripple" "^0.40.1"
+    "@material/rtl" "^0.40.1"
+    "@material/shape" "^0.40.1"
+    "@material/theme" "^0.40.1"
+    "@material/typography" "^0.40.1"
+
+"@material/elevation@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-0.40.1.tgz#beb17eb90bde94459c41cd826c2de13f13b10b25"
+  integrity sha512-VD9ii90WzI+t4df08A9hQIsYLH/N+85a2Mqo10CNVZLZYW5fDOwFH/h7553aNoAuSHKPcGCLdyav9J9oC6TSaQ==
+  dependencies:
+    "@material/animation" "^0.40.1"
+    "@material/theme" "^0.40.1"
+
+"@material/mwc-base@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-base/-/mwc-base-0.3.6.tgz#44382945509602adc3ba07b554e81e0f24810873"
+  integrity sha512-DVwsTJYCMSgIXzh7yGdn0CW11qz7/QaimPGbQ1jo4zyV/aizbetpKwFlkJj9Ut45/cCqZMlXIU2valjoO0dU8g==
+  dependencies:
+    lit-element "^2.0.0-rc.2"
+    lit-html "^1.0.0-rc.2"
+
+"@material/mwc-button@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-button/-/mwc-button-0.3.6.tgz#86a05fe27ad365fd5f7d98d4840ef0def5f72096"
+  integrity sha512-ueIyVqSklgMFvlVJFszzlQSwDBvCQtM7FXWBpMGPiUFbzyESb1Wy3e7K0RaeHWzWolUrq9INl9Tt+15i1hnBhA==
+  dependencies:
+    "@material/button" "^0.40.0"
+    "@material/mwc-base" "^0.3.6"
+    "@material/mwc-icon" "^0.3.6"
+    "@material/mwc-ripple" "^0.3.6"
+
+"@material/mwc-icon@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-icon/-/mwc-icon-0.3.6.tgz#0a4fe6984300f240b0a3371e037c9fd59957c40f"
+  integrity sha512-ssdZSY1z2i9n974iXZiy26wZzMAd4/LkPCbHtpUAOqxWLq+8r3djmPuoKhIdiI4YCarpBOpgm8HQEuHdvClkGw==
+  dependencies:
+    "@material/mwc-base" "^0.3.6"
+
+"@material/mwc-ripple@^0.3.6":
+  version "0.3.6"
+  resolved "https://registry.yarnpkg.com/@material/mwc-ripple/-/mwc-ripple-0.3.6.tgz#27d7748e6d1cf45e2ce299d0786440217bf0b3c9"
+  integrity sha512-fCqIoHX5M7qW2iOitEIlJF0TBl1IhzHpXb1lroXBv1JlGGYWWSd5m+v7ZSJU3Apc8s/IkPsDDCk1vSHv6VyOwA==
+  dependencies:
+    "@material/mwc-base" "^0.3.6"
+    "@material/ripple" "^0.40.0"
+    lit-html "^1.0.0"
+
+"@material/ripple@^0.40.0", "@material/ripple@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-0.40.1.tgz#57cbc689303b48282229cb9b62556af7442e852a"
+  integrity sha512-sndeTS4VHa0v1UGj7MNcxMCuO9LJ1DjoL1EjE6BH3Lm3M1MnXJHdsBo2CgPbU/FI84tt6+eyHGOYPdPrEDJhCA==
+  dependencies:
+    "@material/animation" "^0.40.1"
+    "@material/base" "^0.40.1"
+    "@material/theme" "^0.40.1"
+
+"@material/rtl@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-0.40.1.tgz#5b0d973e3c6f8e2ea3656c06ada37ba2fedfa206"
+  integrity sha512-Pk6Iw1/KrhWZoZtkDsPMDUW0bm7Z1zeXb3MTQRCFmjf1wU5cRxgOTtuoZLcJqlcKGppLAzJL/TJV3E7KEiuL0A==
+
+"@material/shape@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-0.40.1.tgz#bd4224902896c3d45fab353d788fe6c4866483a8"
+  integrity sha512-o1pw5+s/jWqsKbUAkCCaEcB8XLqJ4FlZhYfSvxZ88WRw9zoWOt9iQMMP82wLWhUX1DSzpNRI8BAD7aNLK6yRlA==
+
+"@material/theme@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-0.40.1.tgz#3cc3f1bf87ee9581df03e347a1979e53ae617221"
+  integrity sha512-cH1CsGIDisEQ2oroZhLTypV0Ir00x3WIwFXnPo7qv3832tuIDkZY623U3rUax6KNPz4Hh1j0tNpTwgrNZwvwWA==
+
+"@material/typography@^0.40.1":
+  version "0.40.1"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-0.40.1.tgz#68ecb767f7c54ca2f4053cccdd1c4a0198e60f9b"
+  integrity sha512-LkW2tAsId8zGKxGA5VIFXV/D1h4vCHQIuALRMaDpHbNGffgr2ubtJNvCh2EQkm19MTv4igVLEjn1Svh0dXcTpA==
+
 "@mdi/svg@^3.0.39":
   version "3.3.92"
   resolved "https://registry.yarnpkg.com/@mdi/svg/-/svg-3.3.92.tgz#40a12670c46ed7673943b219e8410f90d0996e64"
@@ -1065,16 +1158,6 @@
     "@polymer/paper-ripple" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-button@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-button/-/paper-button-3.0.1.tgz#f13b019137e3f6ccc4d04d0b1f27f4830ea5774d"
-  integrity sha512-JRNBc+Oj9EWnmyLr7FcCr8T1KAnEHPh6mosln9BUdkM+qYaYsudSICh3cjTIbnj6AuF5OJidoLkM1dlyj0j6Zg==
-  dependencies:
-    "@polymer/iron-flex-layout" "^3.0.0-pre.26"
-    "@polymer/paper-behaviors" "^3.0.0-pre.27"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-card@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-card/-/paper-card-3.0.1.tgz#fb5960b3e55fab56d20b7c1c3dee08f0d052ff2a"
@@ -8695,14 +8778,14 @@ listr@^0.14.2:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-lit-element@^2.0.0:
+lit-element@^2.0.0, lit-element@^2.0.0-rc.2:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.0.1.tgz#9ec5871d3b64487f432c7c071df80ef031d7091b"
   integrity sha512-2bu3B2ZYUZgntvOgu3i5mRK8geo45CLUwxwJEYK54hyednoJasjiTZPB13NBg1D+hNM2JfmWTWJnh1QEUQv7zw==
   dependencies:
     lit-html "^1.0.0"
 
-lit-html@^1.0.0:
+lit-html@^1.0.0, lit-html@^1.0.0-rc.2:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"
   integrity sha512-oeWlpLmBW3gFl7979Wol2LKITpmKTUFNn7PnFbh6YNynF61W74l6x5WhwItAwPRSATpexaX1egNnRzlN4GOtfQ==